使用scss (配置全局scss变量)

有时往往需要一些全局样式，但用@import导入未免麻烦，这时可以使用vue插件style-resources-loader。 默认情况下 Vue.js 是不支持 Sass、Scss 的，如果想要使用它们，只需要一些简单的安装配置即可。

npm install node-sass -D
npm install sass-loader -D
1.
2.
2、安装style-resources-loader和vue-cli-plugin-style-resources-loader
npm i style-resources-loader -D
npm i vue-cli-plugin-style-resources-loader -D
1.
2.
3. 在vue.config.js中使用
const path = require('path');
module.exports = {
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'scss',
            patterns: [
                // 这个是绝对路径,不能使用 alias 中配置的别名路径，如@表示的src
                path.resolve(__dirname, './src/styles/variables.scss')
            ]
        }
    }
}

4.在组件中使用
<style lang="scss" scoped>
#app {
  background-color: $themeColor;
}
</style>

4. 重启项目
npm run dev
1.
 5、总结
style-resources-loader 的作用：
导入css预处理器的一些公共的样式文件变量，比如：variables , mixins , functions 避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用变量。
-----------------------------------
vue-cli 4 使用scss (配置全局scss变量)
转载：https://blog.51cto.com/u_15127545/3763064