从node-sass迁移至dart sass时，React项目/deep/选择器的处理方案

临时兼容方案（快速完成迁移） #

dart-sass不支持旧的/deep/语法，但支持CSS原生的:deep()伪类选择器，你可以通过以下方式快速兼容：

1. 全局替换语法
   把项目中所有的/deep/替换为:deep()，dart-sass可以正常解析这个语法。同时确认react-scoped-css-loader版本，最新版本已经支持识别:deep()并处理为正确的scoped样式穿透逻辑，如果版本过低建议升级。

2. webpack loader替换（如果无法升级依赖）
   如果react-scoped-css-loader暂不支持:deep()，可以在webpack配置中添加string-replace-loader，在sass-loader处理前将/deep/替换为:deep()：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.scss$/,
           use: [
             'style-loader',
             'react-scoped-css-loader',
             'css-loader',
             {
               loader: 'string-replace-loader',
               options: {
                 search: '/deep/',
                 replace: ':deep(',
                 flags: 'g'
               }
             },
             {
               loader: 'sass-loader',
               options: {
                 implementation: require('sass') // 指定使用dart-sass
               }
             }
           ]
         }
       ]
     }
   };
   

3. Sass混合宏封装（便于后续重构）
   可以用Sass的@mixin封装深度选择器，统一管理，后续移除时只需修改混合宏：

   @mixin deep($selector) {
     :deep(#{$selector}) {
       @content;
     }
   }
   
   // 使用示例
   .parent-class {
     @include deep(.child-class) {
       color: #333;
       font-size: 14px;
     }
   }
   

中期逐步移除/deep/的方案 #

待完成dart-sass迁移后，可分批次替换:deep()：

• 第三方组件样式穿透：将第三方组件的样式覆盖移至全局样式文件（如third-party-styles.scss），通过组件的专属类名限定作用域，避免全局污染。例如：

  // 全局样式文件
  .my-app-date-picker .ant-picker-input {
    border-radius: 4px;
  }
  

• 内部组件样式传递：重构组件结构，通过props传递自定义类名给子组件，父组件的scoped样式直接通过该类名控制子组件样式。例如：

  // 子组件 Child.jsx
  function Child({ className }) {
    return <div className={`child-default ${className}`}>...</div>;
  }
  
  // 父组件 Parent.jsx
  import './Parent.scoped.scss';
  function Parent() {
    return <Child className="parent-custom-child" />;
  }
  

  // Parent.scoped.scss
  .parent-custom-child {
    color: blue;
  }
  

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