Vue中引入外部less文件

Vue中引入less文件，由于vue-cli@2.0和vue-cli@3.0的差异比较大，因此分为两种情况。 首先两种情况都需要先安装less-loader 、 less 和 style-loader 插件

npm i less less-loader style-loader -D 

Vue-cli @2.0 中引入less文件

首先需要在webpack.base.conf.js 的rules 中添加

...
rules:[
    {
        test: /\.less$/,
        loader: 'less-loader!style-loader!css-loader'
    }
]
...

然后在utils.js 中找到generateLoaders 函数，在里面添加

    if(loader == 'less'){
      loaders.push({
       loader: 'style-resources-loader',
       options: {
        patterns: path.resolve(__dirname, '../src/assets/less/*.less')
       }
      })
     }

这里的"../src/assets/less/*.less" 地址是我的less文件地址，需要设置成项目中less文件地址，这里的less文件中如果引入了外部文件，需要写全路径

Vue-cli@3.0 中引入less文件

在vue.config.js（如果没有，需要在项目根目录中新建）中添加

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)))
  }
}
function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/assets/less/var.less'),
      ],
    })
}