如何在vue项目中使用less?
前提:用vue -cli脚手架生成vue项目,cmd进入到项目根目录1.用npm安装sass的依赖包(可使用cnpm淘宝镜像)npm install --save-dev sass-loader//sass-loader依赖于node-sassnpm install --save-dev node-sass2.在build目录下找到webpack.base.conf.js文件...
·
前提:用vue -cli脚手架生成vue项目,进入到项目根目录
1.用npm安装sass的依赖包
npm i less less-loader -D
-D 等价于 -s-d
2.新版的vue-cli中已经不需要配置了!!!!在build目录下找到webpack.base.conf.js文件,在module的rules中插入以下代码
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}
3.在vue文件中使用
<style lang='less' scoped>
.charts {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.test {
}
}
</style>
也可以引用less文件
@import url('./index.less');
更多推荐
已为社区贡献2条内容
所有评论(0)