Webpack打包React项目App.scss样式不生效及React18警告问题

你遇到的两个问题分别是React 18 API兼容警告、SCSS样式不生效，核心是代码逻辑冲突、配置缺失导致的，按以下步骤修复即可。

1. 解决React 18渲染警告 #

问题原因 #

• 本地安装的是React 18版本，旧版ReactDOM.renderAPI已被官方废弃，需替换为新版createRoot写法
• index.html中额外引入了React 16的CDN资源，和本地React 18版本冲突，会引发不可预期的异常
• App.js中写了重复的渲染逻辑，组件本身没有做导出，导致入口文件依赖加载异常

修复操作 #

• 删除index.html中两行React 16的CDN script标签，项目统一使用npm安装的本地依赖
• 移除App.js中多余的ReactDOM.render逻辑，仅保留组件代码并补全导出语句
• 将入口文件index.js中的渲染逻辑替换为React 18要求的createRoot写法

2. 解决SCSS样式不生效 #

问题原因 #

• webpack配置缺少明确的入口声明，devServer静态资源路径配置错误，导致资源加载链路异常
• App组件未导出，入口文件的依赖执行顺序混乱，SCSS文件没有被正确解析注入到页面
• 项目同时安装了已废弃的node-sass和官方推荐的sass依赖，可能存在scss编译兼容问题
• 缺少babel配置文件，JSX转译逻辑存在异常兼容情况，会影响整体依赖执行顺序

修复操作 #

• 在webpack配置中补全entry入口字段，修正devServer的static路径配置
• 执行npm uninstall node-sass卸载冗余依赖，仅保留sass作为scss编译工具
• 项目根目录新增.babelrc配置文件，让babel-loader可以正常转译JSX语法
• 现有scss loader的顺序配置是正确的（从右到左执行：sass-loader转scss为css -> css-loader解析css依赖 -> style-loader将css注入页面style标签），不需要调整

App.js #

function App() {
  return (
    <div>
      <h1>Webpack is work</h1>
    </div>
  );
}

export default App;

App.scss #

h1 {
  color: rebeccapurple;
}

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Tusk</title>
</head>
<body>
    <div id="app"></div>
    <script src="index.bundle.js"></script>
</body>
</html>

index.js #

require('file-loader?name=[name].[ext]!./index.html');
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './App.scss';

const root = createRoot(document.getElementById('app'));
root.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>
);

webpack.config.js #

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.bundle.js',
    },
    devServer: {
        port: 3010,
        static: path.join(__dirname, '/dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    'style-loader', 
                    'css-loader', 
                    'sass-loader'
                ]
            }
        ]
    },
};

.babelrc（新建，放在项目根目录） #

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

修复配置后先删除旧的dist目录，重新执行npm run serve启动开发服务即可，样式会正常生效，控制台也不会再出现React版本警告。

内容的提问来源于stack exchange，提问作者Алексей Попов