现在都已经是 9102 年了，说起要在 Vue 里写样式，基本上都 Sass 起步。Sass 变量有很多好处，其中之一就是定义变量，在写类似 danger, warning, info, primary 样式的时候就不用每次都对颜色背景硬编码了，而是直接用先前定义好的 Sass 变量。
Vue 单件
假如现在我们已经将变量都定义在 global.scss 文件上了，如果要在某个 .vue 文件里使用变量就要先将其引入。
<template>
...
</template>
<script>
...
</script>
<style lang="scss">
@import ("你的路径/global.scss");
.button {
background: $--primary-bg;
}
</style>
但是这种方法不长久，如果我们每个组件都要引入，那不是每个 .vue 都要 @import 一次？这也太麻烦了。我们可能现在会这么想：肯定要将这个 global.scss 文件在一开始的时候就要引入啊。
我在写 UI 组件的时候就想过这个问题，网上的方法大概有三种，下面就简单总结一下。
写在 App.vue 上
如果你写的是一个网站，那么肯定会用到 App.vue 这个文件。所以你可以在 App 这个组件里 @import。注意：不要在 App 组件里写 scoped ，这样引入的样式都会应用到每个组件上。
<template>
...
</template>
<script>
...
</script>
<style lang="scss">
@import "你的路径/global.scss";
...
</style>
如果你说我 App.vue 里有别的代码呀，作为强迫症怎么能加这种不属于 App 的代码呢？那你可以将 App 独立出来嘛，如将 App 包裹你的项目代码，这相当于 HomePage 才是你真正的 App。
App
HomePage
sass-resources-loader
这个 loader 可以将你的 .scss 文件作为全局引入，但是这个是要与 webpack 结合的。官网在这。
安装
npm install sass-resources-loader
配置
要在项目下的 webpack.config.js 里进行配置：
/* Webpack@2: webpack.config.js */
module: {
rules: [
// Apply loader
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
'sass-loader',
{
loader: 'sass-resources-loader',
options: {
// Provide path to the file with resources
resources: './path/to/resources.scss',
// Or array of paths
resources: ['./path/to/vars.scss', './path/to/mixins.scss']
},
},
],
},
],
},
详细请看文档吧，这个方法在 vue-cli 3 里很难配，我没有试过。
vue-cli 3
就像开头所说的，现在都 9102 年了，现在写项目的基本用 vue-cli 3 了。我看了下 vue-cli 3 的文档后发现里面有一个方案可以完成上面 sass-resources-loader 的事情。
你可以在 vue.config.js （如果你没有这个文件，就在你的项目根目录里新建一个就行了）复制如下代码：
// vue.config.js
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有 `src/variables.scss` 这个文件
data: `
@import "@/global.scss";
@import "@/其他.scss";
`
}
}
}
}
我目前是用这个方法了，一般来说没什么太大问题。
多说一句
现在的 vue 已经将 /build/webpack.xxx.js 的 webpack 配置文件都隐藏起来了（如果写过 React 的同学应该知道我在说什么）。而这个 vue.config.js 就像是 webpack.xxx.js 的总和，你可以配置 vue 提供的选项也可以混入 webpack 的配置。
我个人来说就觉得这个好烦啊，因为现在网上很多方法都是 webpack.config.js 里写代码的，而这个 vue-cli 3 的文档不是很多，问题解决方法较少。而且对于 npm 包的配置 Vue 的 Cookbook 和 vue-cli 3 的文档给出两套不同的方案，一边是 Rollup.js 打包，另一边是 Webpack 打包，唉，只能希望以后文档会补完这些坑吧。