如何在react项目中配置less

最新推荐文章于 2023-09-26 12:19:35 发布

前端kit

最新推荐文章于 2023-09-26 12:19:35 发布

阅读量260

点赞数

分类专栏： react 文章标签： react

本文链接：https://blog.youkuaiyun.com/qq_20069429/article/details/82826756

版权

react 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在Create-React-App项目中配置LESS。首先，通过运行npm run eject命令暴露webpack配置，然后安装less和less-loader依赖。接下来，修改webpack.config.dev.js和webpack.config.prod.js文件，调整CSS加载器以支持LESS文件。

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

如何在create-react-app创建的项目下配置less，其实很简单，只是create-react-app创建的项目没有暴露webpack相关配置，所以需要暴露出webpack相关配置，具体操作如下：

一、暴露webpack,安装less\less-loader依赖

在create-react-app创建的项目下是不支持less的，我们要使用less就需要在相关配置文件中配置。

关于less的需要找到两个文件webpack.config.dev.js和webpack.config.prod.js

可是，create-react-app创建的项目是看不到webpack相关的配置文件，所以需要先暴露出来，使用以下命令：

  npm run eject

如果发现与git有冲突 ,先解决冲突

先更新git文件然后再执行
git add .
git commit -am "Save before ejecting"

安装less相关依赖

  npm install less less-loader --save-dev

二、修改webpack文件配置

1、修改webpack.config.dev.js文件配置

// 在module中做了三处修改
  // 第一处是找到 `test: /\.css$/` 将其改为  `test: /\.(css|less)$/`
  // 第二处是增加 `less-loader`的配置
  // 第三处是在exclude属性中增加 `/\.(css|less)$/` 
  // 具体修改如下
test: /\.(css|less)$/,  //TODO 第一处
use: [
  require.resolve('style-loader'),
  {
    loader: require.resolve('css-loader'),
    options: {
      importLoaders: 1,
    },
  },
  // TODO 第二处 
  {
    loader: require.resolve('less-loader')
  }
  …
]


exclude: [/\.js$/, /\.html$/, /\.json$/, /\.css|less$/], //TODO 第三处

2、修改webpack.config.pro.js文件配置

操作和webpack.config.dev.js相同

详情见https://github.com/q867858321/kit_study/tree/master/react-book-master/chapter-02/bbs-components-less