使用Vue-cli脚手架工具搭建的Vue项目,默认是没有引入出列less的loader的.
我们想在vue项目中使用less,就需要配置less的loader.
1.安装less的loader
npm install less less-loader --save-dev
2.配置less-loader
我的demo使用的脚手架是vue-cli2的版本的,需要在webpack.base.con.js中配置:
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
},
3.less使用
配置好了less-loader以后,就可以在vue文件中,或者直接创建less文件来写less代码了
<style lang="less">
.login {
clear: both;
width: 350px;
margin: 0 auto;
overflow: hidden;
}
</style>