Vue CLI 3+ 中配置全局样式变量

4/16/2021 VueScssLessCSS预处理器

使用 vue-cli-plugin-style-resources-loaderstyle-resources-loader 插件实现。

# 安装和配置

如果是全新项目可以选择 vue add style-resources-loader 安装,Vue CLI 会自动安装 vue-cli-plugin-style-resources-loaderstyle-resources-loader,并修改 vue.config.js

这里我们选择自主安装

npm i -D vue-cli-plugin-style-resources-loader style-resources-loader

随后配置 vue.config.js

const pathResolve = directory => {
  return path.resolve(__dirname, directory)
}

module.exports = {
  pluginOptions: {
    // 向全局注入 scss 变量
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [pathResolve('./src/styles/*.scss')]
    }
  }
}

# 说明

  • preProcessor

    • 可以是字符串: 'scss''less''styl'
    • 也可以是数组:['scss', 'less']
  • patterns

    • 可以是单个路径:path.resolve(__dirname, 'path/to/less/variables.less')path.resolve(__dirname, 'path/to/less/variables/*.less')
    • 也可以是数组:[path.resolve(__dirname, 'path/to/less/variables.less'), path.resolve(__dirname, 'path/to/less/mixins.less')]
  • css 预处理器的变量注册到全局后,可以在 .vue.scss 文件中直接使用已被注册的变量或样式。

  • 如果该样式文件已经被注册,尽量不要再在 .vuemain.js 或其他地方重复引入,会导致打包后样式代码重复。