vue-cli脚手架中使用Less

责编:menVScode 2018-05-11 15:10 阅读(503)

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"。 注意: scoped的作用仅仅是限定css的作用域,防止变量污染。

<style scoped lang="less">

</style>

这样就可以根据less的语法使用了,通过下面的代码就不难理解问什么scoped可以隔离作用域了。 

// 有scoped属性
.webHeader .logo[data-v-3392b41d] {
    display: block;
    width: 230px;
    height: 100%;
    background: #f44336;
    color: #fff;
    text-align: center;
}

//没有scoped属性
.webHeader .logo {
    display: block;
    width: 230px;
    height: 100%;
    background: #f44336;
    color: #fff;
    text-align: center;
}
标签: Less vue-cli vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码