使用 Webpack 将选择器全局添加到我的所有 CSS 选择器（在构建时）答案

【问题标题】：Globally add selector to all my CSS selector with Webpack (at build time)使用 Webpack 将选择器全局添加到我的所有 CSS 选择器（在构建时）
【发布时间】：2017-07-19 14:12:07
【问题描述】：

我想将一个特定的选择器全局附加到我的应用程序中使用的所有 CSS 选择器。

我正在使用 React 和那些 Webpack 加载器 post-css、css-loader、sass-loader 和 extract-text-webpack-plugin。

我不想在 jsx 文件中编辑我的所有类名。我只想在构建时附加这个特定的选择器。

是否有加载器来实现这一点？或任何其他解决方案...

我实际拥有的：

.myClass {
  ...

  &--blue { ... }
}

Webpack 转译后我想要什么：

.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }

谢谢

高缇耶

PS：我需要这个功能的原因是为了避免 CSS 选择器与我正在集成我的应用程序的网站发生冲突。我不想手动编辑我所有的 scss 文件来附加选择器。

【问题讨论】：

标签： sass webpack css-selectors css-loader sass-loader

【解决方案1】：

这应该可以在你的主 sass 文件中解决：

.specificClass {
    @import 'variables';
    @import 'fonts';
    // ... do more imports
}

【讨论】：

我没有单一的 sass 入口点。我直接在 React 组件上导入我所有的 scss 文件。