Vue 2.x 中配置全局样式变量

注意

以下 Vue CLI 的相关配置是在 Vue CLI 版本 >= 3.0 的基础上

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

安装和配置

提示

如果是全新项目可以选择 vue add style-resources-loader 安装，Vue CLI 会自动安装 vue-cli-plugin-style-resources-loader 和 style-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 文件中直接使用已被注册的变量或样式。
如果该样式文件已经被注册，尽量不要再在 .vue、 main.js 或其他地方重复引入，会导致打包后样式代码重复。

Vue 2.x 中配置全局样式变量 #

安装和配置 #

说明 #

Vue 2.x 中配置全局样式变量

安装和配置

说明