解决create-react-app 中less不生效

如果在由create-react-app创建的项目中less样式不生效，通常这是因为create-react-app默认不支持less，你需要进行一些配置来启用对less的支持。

发现通过create-react-app构建的react应用不支持less样式，所以这里提供了三种方法以作大家参考。方法一 推荐在刚构建的时候使用，如果你已经写了很多代码，你会发现需要删除很多文件才能成功！另外两种方法类似，个人推荐第三种方案！

1.方案

方法一:暴露webpack.config.js配置

1.安装less和less-loader

npm install less less-loader

或者如果使用yarn：

 yarn add less less-loader

2.通过 npm run eject暴露配置

npm run eject

2.找到webpack.config.js，添加如下内容：

//引入 less 文件的配置
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;   

3.然后找到 webpack.config.js 文件中的 return --> module.rules.oneOf 部分，添加以下代码：

{
  test: lessRegex,
  exclude: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 4, // 用于决定css文件中读取到@import时被外层数组中哪个处理
        sourceMap:  isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: {
          mode: 'icss',
        },
      },
      'less-loader'
  ),
  sideEffects: true, // 允许通过配置，标识代码是否有副作用
},
{
  test: lessModuleRegex,
  use: getStyleLoaders(
      {
        importLoaders: 4,
        sourceMap:  isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: {
          mode: 'local',
          getLocalIdent: getCSSModuleLocalIdent,
        }
      },
      'less-loader'
  ),
},

方法二：使用craco（create-react-app配置重写器）

1. 安装craco和less以及craco-less插件：

   npm install @craco/craco craco-less less

   或者如果使用yarn：

   yarn add @craco/craco craco-less less

2. 在项目根目录中创建一个craco.config.js文件，添加以下内容：

   const CracoLessPlugin = require('craco-less');
   
   module.exports = {
     plugins: [
       {
         plugin: CracoLessPlugin,
         options: {
           lessLoaderOptions: {
             lessOptions: {
               modifyVars: { '@primary-color': '#1DA57A' }, // 可以在此修改默认的主题变量
               javascriptEnabled: true,
             },
           },
         },
       },
     ],
   };

3. 修改package.json中的脚本命令，使用craco替代react-scripts：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
   }

4. 现在，你可以在项目中使用.less文件，并像使用.css文件一样导入它们。

方法三：使用customize-cra和react-app-rewired

1. 安装react-app-rewired和customize-cra以及less-loader：

   npm install react-app-rewired customize-cra less-loader less

   或者如果使用yarn：

   yarn add react-app-rewired customize-cra less-loader less

2. 在项目根目录中创建一个config-overrides.js文件，添加以下内容：

   const { override, addLessLoader } = require('customize-cra');
   
   module.exports = override(
     addLessLoader({
       lessOptions: {
         javascriptEnabled: true,
       },
     })
   );

3. 修改package.json中的脚本命令，使用react-app-rewired替代react-scripts：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }

4. 你现在应该可以在项目中使用.less文件了。

注意： 在使用这些工具时，请确保检查它们与create-react-app的当前版本兼容性，因为随着新版本的发布，可能会有所变化。

2.总结

使用上述任一方法后，您的项目应该能够支持less。记住，在你的组件中导入.less文件时，要确保使用正确的路径。如果仍然无法生效，那你可以在下方留言，我们一起探讨探讨！