如何在vue中引入全局变量？ 接下来我们一起探索下：
在CSS世界中，SASS/SCSS,LESS,PostCSS是最常见的CSS预处理器。SASS似乎是最流行的解决方案，它的功能丰富，扩展的CSS语言更容易使人理解。
在Vue中多亏了 vue-loader ，只需要单个文件组件的样式中标记，添加带有所需语言的 lang="scss" 属性，就可以使用这些预处理器解决方案中的任何一个：
1
2
3
4
5
6
7
<!-- Classroom.vue -->
<style lang="scss">
$bg-classroom: #232323;
.classroom {
background: $bg-classroom;
}
</style>
随着项目规模增长，为了便于管理和配置，将SASS中的变量、mixin和函数，拆分成单独的文件，通过 @import 指令导入它们：
1
2
3
4
5
6
7
8
9
/* scss/_variables.scss */
$bg-classroom: #232323;
<!-- Classroom.vue -->
<style lang="scss">
@import "./scss/_variables.scss";
.classroom {
background: $bg-classroom;
}
</style>
这样拆分之后会更清晰，但问题是，我们在需要使用变量、mixin或函数的每个组件都必须导入这些文件，这将成为一个非常繁琐的任务，下面的这些代码将会在所有组件中重复出现：
1
2
3
4
5
6
<style lang="scss">
@import "./scss/_variables.scss";
@import "./scss/_mixins.scss";
@import "./scss/_functions.scss";
/* ... */
</style>
让我们看下如何解决这个问题，在 vue-cli 3.x 中全局加载SASS框架文件。
在vue-cli中加载全局SASS
在这里默认您是使用 vue-cli v3.x 创建的项目，如果没有，可以通过安装cli并运行create命令来创建它：
1
2
npm install -g vue-cli
vue create awesome-project-name
然后安装所需的sass依赖
1
npm install --save-dev node-sass sass-loader
vue-cli 允许通过在项目的根目录创建一个 vue.config.js 文件来修改其配置，该文件使用多个配置选项导出对象。
其中有 css 选项，有一个loaderOptions属性，我们可以使用它来更改 vue-loader 的内部配置。
可能你并不知道这个方法，我们可以使用data选项执行一些全局的CSS预处理代码，所以我们可以使用它来导入我们的CSS工具：
1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
`
}
}
}
};
注意： @ 在vue-cli中指的是 /src 的别名
我们在 loaderOptions 下指定了sass加载程序。就像这样文件中的所有代码都可以在全局可用。我们可以在任何组件中使用：
1
2
3
4
5
6
<style lang="scss">
.classroom {
/* No need to import, it just works \o/ */
background: $bg-classroom;
}
</style>
不使用vue-cli 3.x如何在项目中设置
如果不使用vue-cli 3.x，则需要调整webpack配置文件中的vue-loader选项。如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.config.js
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
data: `
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
`
}
}
]
}
注意
要确保在数据配置中导入的文件只包含不被呈现的SASS代码，比如变量、mixin和函数。否则对于最终的后期处理的css文件中的每个组件，改代码都将充分执行。
这就是 vue-loader 的执行方式：它会预先在每个组件的CSS中定义所有文件。
例如：假设你有10个组件，并且预加载了我们上面看到的文件_variables.scss，而且_variables.scss包含任何CSS规则，如：
1
2
3
.box {
color: $red-color;
}
实际上它将会包含在每个组件的CSS部分，最终得到10个重复的.box规则。
译文：https://vueschool.io/articles/vuejs-tutorials/globally-load-sass-into-your-vue-js-applications/