vue项目中的less配置问题？

最新推荐文章于 2025-06-14 15:03:11 发布

原创最新推荐文章于 2025-06-14 15:03:11 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

10 篇文章

订阅专栏

本文主要探讨vue项目中的less配置问题。介绍了通过npm安装less和less-loader，在webpack配置文件添加规则，在代码style标签加lang='less'，还给出了less函数定义和使用示例，同时提到Scoped可避免组件样式相互污染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中的less配置问题？

npm install less less-loader --save-dev安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：
{
test: /.less$/,
loader: “style-loader!css-loader!less-loader”,
}
在代码中style便签中加上lang=‘less’
定义 .w(@px){
width: unit(@px/37.5,rem);//重置单位
}
使用 .w(375);

Scoped它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。