【Less】 less抽取公共样式

---

前言

当我们做一个项目时，会出现很多重复样式，每次都要重新写很麻烦。尤其是大量的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>

---

总结

你学废了吗？