vue-cli默认是不支持less,需要自己添加。
1.在项目目录下安装 less 和 less-loader
npm install less less-loader --save-dev
2.安装成功后,打开 build/webpack.base.conf.js ;在 module.exports={} 添加代码
module.exports = {
// 此处省略无数行,已有的的其他的内容
module: {
rules: [
// 此处省略无数行,已有的的其他的规则
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
]
}
}
3.在代码中的 style 标签中 加上 lang=“less” 属性即可
<style lang="less" scoped>
@fontColor:red;
@borderSize: 1px solid red;
.txt {
color: @fontColor;
border: @borderSize;
}
</style>