Vue项目中如何使用less(添加less依赖)

前端之家收集整理的这篇文章主要介绍了Vue项目中如何使用less(添加less依赖)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

 

今天在新工程里添加了一段样式代码代码突然报错了:

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.input-Box {
  border: 1px solid pink;
  width: 100%;
  max-width: 500px;
  display: inline-block;
  padding: 20px;
  Box-sizing: border-Box;
  & + .input-Box { margin-top: 20px; }
}
</style>

仔细一看提示less依赖没有装:

分享图片

那么,怎么添加依赖呢?

第一步:

安装less依赖

npm install less less-loader --save

 依赖装好了就不报错了,如果要支持外部less,可以继续配置:

第二步:

修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码添加

{

test: /\.less$/,loader: "style-loader!css-loader!less-loader",},

猜你在找的设计模式相关文章