第一步:npm install less --save-dev (首先已安装node和npm包管理工具)
第二步: npm install less-loader --save-dev
第三步: 找到 webpack.base.conf.js文件
添加:
module: {
rules: [
/* 其他代码省 */
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
/* 其他代码省 */
]
},
接下来可以在 .vue文件下使用less了
//hello.vue
<style lang="less">
@pubColor: red;
@fontSize: 20px;
.class1{
position: fixed;
left: 100px;
top: 100px;
width: 80px;
height: 20px;
background: @pubColor;
p {
width: 100px;
height: 200px;
span {
color: @pubColor;
font-size: @fontSize;
}
}
}
</style>
// 引入全局less文件
<style lang="less"> //别忘了加 lang="less"哦
@import '/style/global.less'
</style>
vue+webpack使用预处理语言less编译css方法
最新推荐文章于 2024-04-20 18:55:08 发布