Vue CLI 3 自动化导入，配置sass全局变量

发表于 分类于

使用 sass\less\Stylus 等预处理器时要定义一些全局变量、mixin，组件内使用是需要 import 进去的，每个文件都 import 一次很麻烦，所以需要使用自动化导入来帮我们处理。

在官方文档关于自动化导入的介绍中，看到可以使用style-resources-loader，支持css, sass, scss, less, stylus。

也可以使用vue-cli-plugin-style-resources-loader插件的方式来安装。

运行vue add style-resources-loader后选择一个预处理器，这里我选 scss，然后它帮我在根目录生成了vue.config.js文件，里面有这样一段内容

1
2
3
4
5
6
7
8
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: []
    }
  }
}

然后在 patterns 中填入路径

1
2
3
4
5
6
7
8
9
10
11
12
const path = require('path')

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, './src/assets/css/_themes.scss'),
      ]
    }
  }
}

重新启动npm run serve，已经生效了。