vue-cli 构建的项目中如何使用 Less

最新推荐文章于 2024-04-14 02:07:49 发布

仰望星空的代码

最新推荐文章于 2024-04-14 02:07:49 发布

阅读量513

点赞数

分类专栏： Vue.js踩坑记文章标签： less vue

Vue.js踩坑记专栏收录该内容

21 篇文章 58 订阅 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何在使用 Vue CLI 创建的项目中启用并使用 Less。首先，你需要通过命令行安装 less 和 less-loader。接着，编辑项目的 webpack 配置，将 less 和 less-loader 添加到 module.rules 中。最后，确保在组件的 style 标签中指定 lang="less"，以便正确解析 Less 代码。

摘要由CSDN通过智能技术生成

vue-cli 构建的项目默认是不支持 less 的，需要自己添加。

首选，安装 less 和 less-loader ，在项目目录下运行如下命令

npm install less less-loader --save-dev

安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：

module.exports = {
    //  此处省略无数行，已有的的其他的内容
    module: {
        rules: [
          //  此处省略无数行，已有的的其他的规则
          {
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
          }
        ]
    }
}

最后，在代码中的 style 标签中加上 lang="less" 属性即可~