共计 470 个字符,预计需要花费 2 分钟才能阅读完成。
vue-cli 构建的项目默认是不支持 less 的,需要自己添加依赖
1. 安装 less 和 less-loader,在项目目录下运行如下命令 npm install less less-loader --save-dev
2. 安装成功后,打开 build/webpack.base.conf.js,在 module.exports = 的对象的 module.rules 后面添加一段:
module.exports = {
// 此处省略无数行,已有的的其他的内容 | |
module: { | |
rules: [ | |
// 此处省略无数行,已有的的其他的规则 | |
{ | |
test: /\.less$/, | |
loader: "style-loader!css-loader!less-loader", | |
} | |
] | |
} | |
} |
3. 最后,在代码中的 style 标签中加上 lang=”less” 属性即可
<style lang="less" scoped> | |
.index-wrap { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
span {font-size: 0.373rem;} | |
} | |
</style> |
正文完