Vue相中使用less预处理器

使用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>