【React】使用脚手架搭建的项目使用less文件

最新推荐文章于 2026-03-09 00:09:39 发布

原创最新推荐文章于 2026-03-09 00:09:39 发布 · 943 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ReactJs

本文详细介绍如何在使用create-react-app创建的React项目中手动集成Less，包括安装必要插件、配置Webpack以及重启项目使Less样式生效的步骤。

使用create-react-app脚手架工具搭建的项目中，使用less文件运行不会报错，但是样式会无效。

原因：create-react-app是由React官方提供并推荐使用构建新的React单页面应用程序的最佳方式，其构建的项目默认是不支持less的，需要我们手动集成。

解决：

step1：安装less和less-loader插件包：【npm install less less-loader --save-dev】

step2：新建项目一般默认不显示config目录的，需要执行：【npm run eject】

此时项目中会多出两个文件夹，config 和 scripts 文件夹，package.json文件也被修改了。如下图，是执行命令之后生成和修改的文件：

注：执行这个命令前，需要提交代码，不然会报错，提示让你提交代码后再进行。

step3：安装完之后，打开 config/webpack.config.js 文件，修改3处地方：

1、搜索 sassModuleRegex ，然后在后面添加下面这两行代码：

//在这里添加less正则
const lessRegex = /\.(less)$/;
const lessModuleRegex = /\.module\.(less)$/;

如下图：

2、搜索 getStyleLoaders 函数，添加代码：

{
    loader: require.resolve('less-loader'),
    options: lessOptions,
},

如下图：

3、搜索 sass-loader ，大概在461行，模仿代码中提供的sassRegex代码，添加如下代码：

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
    },
    'less-loader'
  ),
  sideEffects: true,
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
    {
      importLoaders: 2,
      sourceMap: isEnvProduction && shouldUseSourceMap,
      modules: true,
      getLocalIdent: getCSSModuleLocalIdent,
    },
    'less-loader'
  ),
},

如下图：