美文网首页
vue全局混入less

vue全局混入less

作者: 明月半倚深秋_f45e | 来源:发表于2018-08-10 10:51 被阅读0次

    准备写一个全局的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

          本文链接:https://www.haomeiwen.com/subject/cflkbftx.html