前言
当我们做一个项目时,会出现很多重复样式,每次都要重新写很麻烦。尤其是大量的flex
布局,给他抽取一个文件随后引用就可以了。
一、安装Less
npm i less less-loader -D
二、vite中配置less
在vite.config.js中配置less
// 配置css,指定传递给 CSS 预处理器的选项。
css: {
preprocessorOptions: {
less: {
charset: false,
additionalData: `@import "${path.resolve(__dirname,"./src/style/variables.less")}";`,//换成自己路径
},
},
},
三、使用步骤
1.编写.less文件
我写的是flex
布局的代码
.flex-between(){
display: flex;
justify-content: space-between;
align-items: center;
}
@color:red;
2.在页面使用公共样式
<style lang="less" scoped>
.song {
padding: 0.4rem 0.3rem 0rem;
&-top {
.flex-between; //引用上面的.flex-between(){}
background: @color; //引用上面的@color:red;
}
}
}
</style>
总结
你学废了吗?