​从新回归Vue之3.0（七）：安装scss并配置全局样式文件，.env.环境变量配置和读取

一，安装sass

// 注意要使用scss，必须安装依赖，否则报错
npm install node-sass sass-loader sass -D
在这一步很多人可能会卡住，例如我电脑上版本node -v v12.16.1

vue3.0项目安装sass报错
npm install node-sass sass-loader sass -D
报错如下:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! node-sass@7.0.1 postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the node-sass@7.0.1 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

详细观察发现会卡在这个地方
Downloading binary from https://github.com/sass/node-sass/releases/download/v7.0.1/win32-x64-72_binding.node
[#.................] - :
再找发现这个
Cannot download "https://github.com/sass/node-sass/releases/download/v7.0.1/win32-x64-72_binding.node":
解决方案：直接在当前目录下进行node-sass 的数据源设置
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
安装依赖：
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
这样就解决了

二，使用

按照这个目录创建assets/styles/global.scss文件

$color-primary: #007aff;
随便找个页面写入

<template>
<h2 class="test-color">home页面</h2>
</template>
<style lang="scss" scoped>
.test-color{
color: $color-primary;
}
</style>
在vite.config.ts 文件中配置global.scss

css:{
// css预处理器
preprocessorOptions: {
// 引入 var.scss 这样就可以在全局中使用 var.scss中预定义的变量了
// 给导入的路径最后加上 ;
scss: {
additionalData: '@import "@/assets/styles/global.scss";'
}
}
}

 

这样就可以了

三，.env.环境变量配置和读取

写变量时一定要以VITE_开头，才能暴露给外部读取

在根目录下创建.env.development和.env.production俩个文件

# 开发环境 / #生产环境
VITE_APP_TITLE = "前端技术栈"
VITE_APP_PORT = 3001

# 请求接口
VITE_APP_BASE_URL = "http://39.12.29.12:8080"

//env.d.ts文件内进行 环境变量智能提示配置
interface ImportMetaEnv {
VITE_APP_TITLE: string,
VITE_APP_PORT: string,
VITE_APP_BASE_URL: string
}

vite.config.ts 读取配置文件

放开含有loadEnv的行

重启，运行

在

<template>
首页内容展示
</template>
<script setup lang="ts">
import { onMounted } from 'vue';
// 读取环境变量
const mode = import.meta.env;
onMounted(()=>{
console.log(mode,555);
})
</script>