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

由于在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样式文件发挥作用呢?

希望各位专家不惜赐教!

使用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

呃呃呃,我忘了改node_modules/react-script-ts/config/webpack.config.prod.js,把以上的改动同样应用在该文件夹下就可以在build之后的生产模式下使用SCSS了。Hhhh