Webpack中CSS全局引入node_modules资源的问题求助

嘿，我完全懂你为啥嫌弃之前的写法——直接用内联loader导入样式确实不够优雅，而且你之前用:global时的语法错了才导致失效。我给你几个靠谱的解决方案：

方案1：组件中分开导入（最简单直接） #

不用在CSS文件里折腾，直接在React组件里把全局样式和模块化样式分开导入：

// 全局导入第三方样式，不会被CSS Modules处理
import 'react-soundplayer/styles/buttons.css';
// 导入自己的模块化样式
import styles from './style/App.css';

这样第三方样式会全局生效，你自己的样式依然保持模块化，代码清晰易读，比之前的内联loader优雅太多。

方案2：修正CSS文件中的:global语法 #

你之前的写法错把大括号写成小括号了！CSS Modules的:global需要用大括号包裹内容，正确的写法是：

/* App.css */
:global {
  @import '~react-soundplayer/styles/buttons.css';
}

/* 下面是你的模块化样式，会自动生成哈希类名 */
.appContainer {
  padding: 20px;
}

这样Webpack就能正确识别:global块，把里面的@import解析成全局样式，不会把代码原样输出了。

方案3：Webpack配置区分处理（最灵活） #

如果你的项目里有很多第三方样式需要全局引入，可以在Webpack配置里把自己的CSS和node_modules里的CSS分开处理：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      // 处理本地CSS，启用CSS Modules
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]' // 自定义类名格式
            }
          }
        ]
      },
      // 处理第三方CSS，不启用Modules，全局生效
      {
        test: /\.css$/,
        include: /node_modules/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

配置好之后，不管你是在组件里直接导入第三方CSS，还是在自己的CSS文件里@import，第三方样式都会全局生效，本地样式依然保持模块化，一劳永逸。

我个人推荐方案1或者方案3，看你的项目需求来选～

内容的提问来源于stack exchange，提问作者Ridhwaan Shakeel