如何在vue-cli中使用less

最新推荐文章于 2025-06-14 15:03:11 发布

沙子揉碎在眼睛里

最新推荐文章于 2025-06-14 15:03:11 发布

阅读量794

点赞数

分类专栏： vue webpack

vue 同时被 2 个专栏收录

34 篇文章

订阅专栏

webpack

6 篇文章

订阅专栏

本文介绍如何在Vue项目中配置并使用Less预处理器。首先确保安装了必要的环境依赖，如node.js, vue.js等，然后通过npm安装Less及less-loader。接着在webpack.base.conf.js文件中添加针对Less文件的加载规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这之前，你需要确定已经具备环境：node.js；vue.js；vue.cli；webpack；

首先安装less

npm install less less-loader --save-dev

其次在build/webpack.base.conf.js中加入一则less的rule

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