vuecli3配置less全局变量

发表于

安装预处理 less、less-loader

npm install -D less-loader less

安装插件style-resources-loader

vue add style-resources-loader
建议使用使用上面这个命令来安装，会省掉很多麻烦。
如果在 vue ui 里安装的话，要先插件安装vue-cli-plugin-style-resources-loader，再去依赖安装style-resources-loader

我这是使用默认配置安装的新项目，只添加了 less、less-loader、style-resources-loader
安装完成之后：
package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
"devDependencies": {
  "@vue/cli-plugin-babel": "^3.2.0",
  "@vue/cli-plugin-eslint": "^3.2.0",
  "@vue/cli-service": "^3.2.0",
  "babel-eslint": "^10.0.1",
  "eslint": "^5.8.0",
  "eslint-plugin-vue": "^5.0.0-0",
  "less": "^3.9.0",
  "less-loader": "^4.1.0",
  "style-resources-loader": "^1.2.1",
  "vue-cli-plugin-style-resources-loader": "^0.1.3",
  "vue-template-compiler": "^2.5.17"
},

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
const path = require('path') // 自己添加的
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
          path.resolve(__dirname, './src/index.less')  // 自己添加的, less全局变量所在文件
      ] 
    }
  }
}