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

有时往往需要一些全局样式，但用@import导入未免麻烦，这时可以使用vue插件style-resources-loader。

默认情况下 Vue.js 是不支持 Sass、Scss 的，如果想要使用它们，只需要一些简单的安装配置即可。

1、安装node-sass和sass-loader

npm install node-sass -D
npm install sass-loader -D

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

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

 5、总结

style-resources-loader 的作用：

导入css预处理器的一些公共的样式文件变量，比如：variables , mixins , functions 避免在每个样式文件中手动的@import导入，然后在各个css 文件中直接使用变量。