vue项目中使用less

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>

vue项目中使用less

相关推荐