VUE Cli3项目添加LESS支持

安装依赖

cnpm install --save-dev less@3.12.2 less-loader@7.0.1

npm install --save-dev style-resources-loader
npm install --save-dev vue-cli-plugin-style-resources-loader

配置vue.config.js

module.exports = {
   // 全局less变量
   pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // patterns: [path.resolve(__dirname, './src/assets/less/1.less')]
      patterns: [],
    },
  },
};

出现错误

Syntax Error: TypeError: this.getOptions is not a function

 @ ./node_modules/vue-style-loader??ref--10-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--10-oneOf-1-2!./node_modules/_less-loader@8.0.0@less-loader/dist/cjs.js??ref--10-oneOf-1-3!./node_modules/_style-resources-loader@1.4.1@style-resources-loader/lib??ref--10-oneOf-1-4!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/projects/projectA/App.vue?vue&type=style&index=0&lang=less& 4:14-581 14:3-18:5 15:22-589

 @ ./src/projects/projectA/App.vue?vue&type=style&index=0&lang=less&

 @ ./src/projects/projectA/App.vue

 @ ./src/projects/projectA/main.js

 @ multi (webpack)-dev-server/client?http://192.168.1.3:8081&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/projects/projectA/main.js

原因

   less-loader安装的版本过高,降低版本，

   cli3降低less-loader版本为

   "less": "^3.12.2",    "less-loader": "^7.0.1",

解决

   降低版本，安装指定版本

npm uninstall less-loader

cnpm install --save-dev less@3.12.2 less-loader@7.0.1