vue全局混入less

准备写一个全局的less,里面放这公用的less变量和方法
如果每个页面都去

@import  '../assets/css/common.less'

太繁琐了
于是找到一个方法
参考https://www.jianshu.com/p/ab9ab999344b

先安装依赖

npm install sass-resources-loader --save-dev

然后去build下的utils.js下找到 generateLoaders方法
在 less后面加上 .concat()代码 (如下)
如果你的是sass,或者stylus那就去对应的地方改

function generateLoaders(){
//上面省略很多
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less').concat({
      loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/common.less') //地址按照自己的更改
        }
    }),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

再然后就是重新npm run dev了

你可能感兴趣的:(vue全局混入less)