构建嵌入外部应用的React项目时排除指定SCSS文件的问题

问题说明 #

我的React应用嵌入到外部宿主应用里运行，宿主那边的amzn/vendor-central-trim/src/aui/aui-shim.scss文件打乱了我的应用样式。我试着在webpack规则里加了排除配置，但没起作用，配置代码如下：

{
  test: /\.s?scss$/,
  exclude: /amzn\/vendor-central-trim\/src\/aui\/aui-shim\.scss/,
  use: [
    'style-loader',
    'css-loader',
     'sass-loader',
  ],
},

开发工具里看到的源码目录结构是：node_modules下存在@amzn/vendor-central-trim/src/aui目录，目标文件aui-shim.scss就在这个目录里。

可行的解决办法 #

1. 修正正则匹配规则 #

原来的正则没匹配到实际路径（文件在@amzn前缀下，不是直接的amzn），调整后确保精准匹配目标文件：

{
  test: /\.s?scss$/,
  exclude: /@amzn\/vendor-central-trim\/src\/aui\/aui-shim\.scss$/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ],
},

添加@前缀匹配实际路径，用$锚定结尾避免误匹配其他类似路径的文件。

2. 用绝对路径直接排除 #

如果正则匹配不稳定，直接写文件绝对路径更稳妥，先引入path模块再指向目标文件：

const path = require('path');

// 放在webpack配置的module.rules中
{
  test: /\.s?scss$/,
  exclude: path.resolve(__dirname, 'node_modules/@amzn/vendor-central-trim/src/aui/aui-shim.scss'),
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ],
},

3. 单独规则忽略目标文件 #

给这个干扰样式的SCSS文件单独写规则，用null-loader直接忽略它（需先安装依赖：npm install null-loader --save-dev）：

// 先匹配目标文件，不做任何处理
{
  test: /aui-shim\.scss$/,
  include: /@amzn\/vendor-central-trim\/src\/aui/,
  use: ['null-loader']
},
// 再处理其他正常SCSS文件
{
  test: /\.s?scss$/,
  exclude: /@amzn\/vendor-central-trim\/src\/aui\/aui-shim\.scss/,
  use: [
    'style-loader',
    'css-loader',
    'sass-loader',
  ],
},

4. 样式隔离兜底方案 #

要是排除文件的方法都行不通，换思路做样式隔离：

• 使用CSS Modules：给React组件的样式文件启用CSS Modules，确保样式仅作用于自身组件
• 使用Shadow DOM：将React应用挂载到Shadow DOM中，完全隔绝宿主样式影响

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