react项目tsconfig不生效

Posted 2023-05-15

1、第一步我们将webpack.config.js文件也就是webpack配置文件暴露出来，通过执行以下命令：

npm run eject

2、运行完命令之后我们可以在项目中看到scripts和config文件夹，但是我们要修改的使webpack配置文件，使其能够支持less文件，所以我们只需要打开config中的webpack文件进行配置即可。

3、找到配置文件，我们只需要修改三个地方
（1）添加less的正则

文字版如下：

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

（2）在样式加载器函数的loaders数组中添加less对象

文字版如下：


loader: require.resolve('less-loader'),
,

（3）在module模块的rules中模仿sass的写法（具体位置在sass的下面）

文字版代码：

//less配置

test: lessRegex,
exclude: lessModuleRegex,
use: getStyleLoaders(

importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
,
'less-loader'
),
sideEffects: true,
,

test: lessModuleRegex,
use: getStyleLoaders(

importLoaders: 2,
sourceMap: isEnvProduction
? shouldUseSourceMap
: isEnvDevelopment,
,
'less-loader'
),
接下来我们就可以重新启动项目了，但是这时候可能还有有小伙伴出现问题，对没错，那个小伙伴就是我，当时我是没办法重新启动项目的，他报出了这样一个错误：

就是出现了：Cannot find module 'react-scripts\config\env.js’这种错误，我们的解决办法就是，通过下载安装react-scripts即可。

npm install --save react-scripts
接下来我们的项目就可以重新启动了！

当然我们在这个过程中还需要注意的是我们不要忘记下载less 和less-loader 参考技术A react + ts路径别名配置不生效 下载插件 react-app-rewired 和 customize-cra create-creact-app项目,如果需要手动修改配置,需先npm run eject.

关于react项目中使用require导入图片不生效的问题

参考技术A 首先 react 项目 img 中的 src 不支持直接赋值相对路径，即不支持：

如果使用 require 导入图像， require 返回一个ES模块而不是字符串。这是因为在file-loader中，esModule选项是默认启用的。
用以下方式之一导入图像即可：