vue项目中使用less

Posted 2021-02-27 ceceliahappycoding

1.安装less less-loader

npm i -D less less-loader

2.在 .vue文件中使用lang="less"和@import

// home.lessc
@base-color: #39c;
@part-color: #3c9;

<style lang="less">
@import ‘./home.less‘;
.triangle {
  width: 0;
  height: 0;
  margin: 20px;
  border: 40px solid;
  border-color: @base-color transparent transparent transparent;
}
</style>

或者直接在该.vue的style中声明自定义样式：

<style lang="less">
 @base-color: #39c;
.triangle {
  width: 0;
  height: 0;
  margin: 20px;
  border: 40px solid;
  border-color: @base-color transparent transparent transparent;
}
</style>