VUE2.0 vue-cli构建项目中使用Less
vue-cli 构建的项目默认是不支持 less 的,需要自己添加。
首先,在项目目录下安装 less 和 less-loader。
npm install less less-loader --save-dev
安装成功后,打开 build/webpack.base.conf.js ,在 module.exports = 的对象的 module.rules 后面添加一段:{test: /.less$/,loader: "style-loader!css-loader!less-loader" }
module.exports = { // 此处省略无数行,已有的的其他的内容 module: { rules: [ // 此处省略无数行,已有的的其他的规则 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" } ] } }
最后,在代码中的 style 标签中 加上 lang="less" 属性即可
<style scoped lang="less"> .div1 { width: 200px; height: 200px; .div2 { width: 100px; height: 100px; } } </style>
漫思