React项目webpack配置后node_modules内第三方组件样式不生效

你当前的webpack配置仅配置了css-loader，该loader仅能解析CSS文件的内容，无法将解析后的样式插入到页面中生效，这是导致第三方组件自带样式不生效的核心原因。

1. 首先安装缺失的style-loader依赖，执行命令：

npm install style-loader --save-dev
# 若使用yarn则执行
yarn add style-loader -D

2. 修改webpack.config.js中的CSS处理规则，调整loader顺序（loader执行顺序为从右到左，所以要把style-loader放在css-loader前面）：
   将原配置中对应的css规则：

{
    test: /\.css$/i,
    use: 'css-loader'
}

替换为：

{
    test: /\.css$/i,
    use: ['style-loader', 'css-loader']
}

如果之后你需要开启CSS Modules处理项目内的自定义样式，记得要排除node_modules目录，避免第三方组件的类名被哈希重命名导致样式失效，配置参考：

{
    test: /\.css$/i,
    oneOf: [
        // 匹配node_modules里的css，不开启modules
        {
            include: /node_modules/,
            use: ['style-loader', 'css-loader']
        },
        // 项目内自定义css，开启modules
        {
            exclude: /node_modules/,
            use: ['style-loader', {
                loader: 'css-loader',
                options: {
                    modules: true
                }
            }]
        }
    ]
}

3. 修改完成后重启webpack-dev-server，或者重新执行打包命令即可生效。

部分UI组件库需要手动在项目入口文件（你的是src/index.jsx）引入组件库的全局样式文件，比如你用到的PrimeReact需要额外引入以下样式：

// PrimeReact 主题样式，可替换为你需要的主题
import 'primereact/resources/themes/lara-light-indigo/theme.css';
// PrimeReact 核心基础样式
import 'primereact/resources/primereact.min.css';

内容的提问来源于stack exchange，提问作者Vladislav Maksimov