React项目如何通过Webpack配置实现组件仅生效自身导入SCSS样式

完全可以通过Webpack配置实现组件样式隔离，你之前配置不生效是配置规则和用法不匹配导致的，按下面的方式调整即可。

现有配置的问题 #

• 你直接给css-loader设置了modules: true，但没有配置类名生成规则，且默认开启模块化后，所有scss文件的类名都会被编译成带哈希的自定义类名，如果组件里还是直接写className="xxx"的字符串形式类名，根本匹配不到编译后的样式，自然不会生效。
• babel编译规则里的排除路径写错了，正确的node_modules路径写法是/node_modules/，你写的/nodeModules/不会生效，会额外增加编译开销。

可落地的配置方案 #

根据你的需求二选一即可：

方案1：标准CSS Modules方案（生产环境推荐，稳定性最高） #

这是目前React项目最常用的样式隔离方案，构建时会自动给每个类名拼接不重复的哈希后缀，从根本上避免类名重名冲突。

1. 调整Webpack中scss文件的处理规则，给css-loader补充模块化配置：

{
  test: /\.s[ac]ss$/i,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        modules: {
          // 自定义编译后的类名格式：原文件名__原类名--5位哈希，方便调试
          localIdentName: "[name]__[local]--[hash:base64:5]",
        },
      },
    },
    "sass-loader",
  ],
}

2. 调整组件里的样式引用方式，导入样式对象后通过属性访问类名：

// header.jsx
import styles from './header.scss';

function Header() {
  // 原写法 className="header" 替换为下面的形式
  return <div className={styles.header}>头部组件内容</div>
}

如果项目里有需要全局生效的样式（比如样式重置、公共类、第三方组件库样式），单独加一条处理规则跳过模块化即可，避免全局样式被编译失效：

// 全局样式处理规则，不开启模块化
{
  test: /\.s[ac]ss$/i,
  include: path.resolve(__dirname, 'src/styles/global'), // 替换为你自己的全局样式存放目录
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'sass-loader'
  ]
},
// 组件样式处理规则，开启模块化
{
  test: /\.s[ac]ss$/i,
  exclude: path.resolve(__dirname, 'src/styles/global'),
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: "css-loader",
      options: {
        modules: {
          localIdentName: "[name]__[local]--[hash:base64:5]",
        },
      },
    },
    "sass-loader",
  ],
}

方案2：零业务代码修改，自动实现样式隔离 #

如果你不想改动现有jsx里的className写法，可以引入postcss相关能力，构建时自动给组件元素和对应样式添加唯一匹配的属性选择器，不需要修改现有业务代码。

1. 先安装需要的依赖：

npm i postcss-loader postcss-modules-scope -D

2. 调整scss处理规则，加入postcss-loader：

{
  test: /\.s[ac]ss$/i,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        postcssOptions: {
          plugins: [
            [
              'postcss-modules-scope',
              {
                generateScopedName: '[name]__[local]--[hash:base64:5]',
                exportGlobals: true,
              }
            ]
          ]
        }
      }
    },
    'sass-loader',
  ],
}

配置完成后直接重启项目，原有代码不需要任何修改就能实现样式隔离。

最后记得把babel规则里的错误路径修正：

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/, // 修正这里的路径写法
  resolve: {
    extensions: [".js", ".jsx"],
  },
  use: {
    loader: "babel-loader",
  },
}

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