【react+ts】react配置使用less

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

🔥 $技术交流QQ群：:837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教

问题原因

react+ts项目中找不到login.less模块,没有配置查找less和css后缀，项目默认找node_modules里的模块，所以我们需要在配置项中添加less和css

import style from "./login.less"

解决流程

1.暴露react配置文件

在项目根目录运行npm run eject暴露react配置文件

npm run eject

如果有报错请查看我另外一篇文章
运行npm run eject报错解决办法

2.修改配置文件

1.找到cssRegex,用以下代码覆盖

const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2.找到变量名getStyleLoaders,修改里面的函数
添加修改以下代码

const getStyleLoaders = (cssOptions, lessOptions,preProcessor) => {
    const loaders = [
      ...
      {
        loader: require.resolve('less-loader'),
        options: lessOptions,
      },
      ...
    ]
  }

3.找到sassRegex关键词,在下面添加以下代码

{
  test: sassRegex,
   exclude: sassModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 3,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
     },
     'sass-loader'
   ),
   // Don't consider CSS imports dead code even if the
   // containing package claims to have no side effects.
   // Remove this when webpack adds a warning or an error for this.
   // See https://github.com/webpack/webpack/issues/6571
   sideEffects: true,
 },
 // Adds support for CSS Modules, but using SASS
 // using the extension .module.scss or .module.sass
 {
   test: sassModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders: 3,
       sourceMap: isEnvProduction
         ? shouldUseSourceMap
         : isEnvDevelopment,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent,
       },
     },
     'sass-loader'
   ),
 },
 {
   test: lessRegex,
   exclude: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders:1,
       sourceMap: isEnvProduction && shouldUseSourceMap,
     },
     'less-loader'
   ),
   sideEffects: true,
 },
 {
   test: lessModuleRegex,
   use: getStyleLoaders(
     {
       importLoaders:1,
       sourceMap: isEnvProduction && shouldUseSourceMap,
       modules: {
         getLocalIdent: getCSSModuleLocalIdent,
       },
     },
     'less-loader'
   ),
 },

重启项目

npm run start

这里特别注意安装的less-loader是5.0.0
npm install less-loader@5.0.0