vue-cli 项目模板中使用 less 方法

项目模板中使用 less 方法

原文地址
vue-cli 构建的项目默认是不支持 less 的,需要自己添加。

  • 首先安装 less 和 less-loader ,在项目目录下运行如下命令

    1
    2
    3
    4
    # npm安装
    npm install less less-loader --save-dev
    # 或者使用 yarn
    yarn add less less-loader --dev
  • 安装成功后,打开 build/webpack.base.conf.js ,在 module.exports =对象的 module.rules 后面添加一段:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    module.exports = {
    // 此处省略无数行,已有的的其他的内容
    module: {
    rules: [
    // 此处省略无数行,已有的的其他的规则
    {
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
    }
    ]
    }
    }
  • 最后在 .vue 页面代码中的 style 标签中 加上 lang=”less” 属性即可

    1
    2
    3
    <style scoped lang="less">

    </style>
  • 之后在项目中测试是否成功

    1
    2
    npm install less less-loader --save-dev
    npm run dev
  • 在浏览其中打开相应页面,这个页面是 / 根页面点击跳转过来的子路由

    可以看到样式编译成功了 哦耶~

坚持原创,坚持做个好人!