React项目中修改node_modules部分配置后，如何在打包发布时保留修改的配置

Question

由于在React项目中使用.scss作为样式文件，参考网上教程，在引入依赖的同时

npm install node-sass -D
npm install sass-loader node-sass --save-dev

需要在node_modules/react-script-ts/config/webpack.config.dev.js 中修改部分配置，
原来的：

{
              loader: require.resolve('file-loader'),
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              options: {
                name: 'static/media/[name].[hash:8].[ext]',
              }
}

修改后：

{
                  exclude: [/\.js$/,/\.html$/,/\.json$/,/\.scss$/],
                  loader: require.resolve('file-loader'),
                  options: {
                          name: 'static/media/[name].[hash:8].[ext]',
                      },
              },
              {
                  test:/\.scss$/,
                  loaders:['style-loader','css-loader','sass-loader']
              },

修改完后，在开发模式下，.scss文件能够正常配置网站的样式，但是在项目打包（npm run build），放置服务器中发布后，网站的样式出现了紊乱，.scss文件中样式配置并没有起到作用。对比了前后样式的变化，发现在开发模式下node_modules/react-script-ts/config/webpack.config.dev.js 中修改的内容并没有在部署模式（打包后）的项目网站中体现。

那么如何在打包发布时保留对node_modules/react-script-ts/config/webpack.config.dev.js的修改，使得.scss样式文件发挥作用呢？

希望各位专家不惜赐教！

Answer 1

使用craco配置，不需要改动脚手架
create-react-app环境配置_SeaBirds的博客-CSDN博客 create-react-app环境配置一、使用eject(npm run eject)暴露出webpack配置该方法会直接在项目下生成配置文件，可以直接在配置文件中修改。但该过程不可逆，不推荐该种用法二、使用插件react-app-rewiredreact-app-rewired搭配插件customize-cra，在根目录下创建config-overrides.js文件可以覆盖默认配置；因react-app-rewired从19年后就没有人维护，也不推荐这种方法三、使用craco插件安装 https://blog.csdn.net/weixin_43090393/article/details/118119362