VUE中如何引入less

作者: 小太阳可可 | 来源:发表于2018-12-21 17:30 被阅读0次

    因为vue-cli 构建的项目默认是不支持 less,所以需要我们手动添加:
    步骤如下:

    1、安装less 和less-loader
    npm install less less-loader --save
    
    2、打开build->webpack.base.conf.js文件,添加如下代码:

    { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
    位置如下:

    module.exports = {
      module: {
        rules: [
          // 此处省略一万个字
          {
            test: /\.less$/,
            loader: 'style-loader!css-loader!less-loader'
          }
        ]
      },
    }
    
    3、完成1,2步骤之后,在页面中就可以用啦!
    <style scoped lang="less">
      .wrap{
        background:#f00;
        li{
          list-style: none;
        }
      }
    </style>
    

    运行报错处理:
    主要原因是less-loader安装版本过高
    解决办法:在package.json中替换低版本:"less-loader": "^4.0.5",

    相关文章

      网友评论

        本文标题:VUE中如何引入less

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