解决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

js 复制代码
npm install less less-loader

或者如果使用yarn

js 复制代码
 yarn add less less-loader

2.通过 npm run eject暴露配置

js 复制代码
npm run eject

2.找到webpack.config.js,添加如下内容:

js 复制代码
//引入 less 文件的配置
const lessRegex = /.less$/;
const lessModuleRegex = /.module.less$/;   

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

js 复制代码
{
  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'
  ),
},

方法二:使用cracocreate-react-app配置重写器)

  1. 安装cracoless以及craco-less插件:

    js 复制代码
    npm install @craco/craco craco-less less

    或者如果使用yarn

    js 复制代码
    yarn add @craco/craco craco-less less
  2. 在项目根目录中创建一个craco.config.js文件,添加以下内容:

    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

    js 复制代码
    "scripts": {
      "start": "craco start",
      "build": "craco build",
      "test": "craco test",
      "eject": "react-scripts eject"
    }
  4. 现在,你可以在项目中使用.less文件,并像使用.css文件一样导入它们。

方法三:使用customize-crareact-app-rewired

  1. 安装react-app-rewiredcustomize-cra以及less-loader

    js 复制代码
    npm install react-app-rewired customize-cra less-loader less

    或者如果使用yarn

    js 复制代码
    yarn add react-app-rewired customize-cra less-loader less
  2. 在项目根目录中创建一个config-overrides.js文件,添加以下内容:

    js 复制代码
    const { override, addLessLoader } = require('customize-cra');
    
    module.exports = override(
      addLessLoader({
        lessOptions: {
          javascriptEnabled: true,
        },
      })
    );
  3. 修改package.json中的脚本命令,使用react-app-rewired替代react-scripts

    js 复制代码
    "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文件时,要确保使用正确的路径。如果仍然无法生效,那你可以在下方留言,我们一起探讨探讨!

相关推荐
蓝倾2 分钟前
京东批量获取商品SKU操作指南
前端·后端·api
JSLove9 分钟前
常见 npm 报错问题
前端·npm
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
爱学习的茄子10 分钟前
React Hooks进阶:从0到1打造高性能Todo应用
前端·react.js·面试
知性的小mahua14 分钟前
vue3+canvas实现摄像头ROI区域标记
前端
嘗_30 分钟前
暑期前端训练day5
前端
uncleTom66636 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥39 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF1 小时前
如何 测试Labview是否返回数据 ?
前端
Spider_Man1 小时前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm