VUE中如何引入less

因为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",

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容