webpack - CSS 模块 : How do I disable local scope for a file?

Question

我在一个新的 React 项目中使用 CSS 模块(通过 Webpack css 加载器)，尽管它工作得很好，但我在获取 React Select 的 SCSS 时遇到了麻烦。去工作。我想这是因为它试图创建 local classNames，JS 中的 react-select不知道。有没有办法导入整个 .scss文件，但范围是全局而不是本地？

Answer 1

当您在 Webpack 配置中使用 css 加载器时，通常您希望使用 ?modules 激活 CSS 模块。在查询字符串中启用，因此您将激活 :local默认范围。这意味着如果你想声明 .selector { ... }未经转换，您必须将其转换为 :global(.selector) {} .

由于您使用的是 SASS 加载程序，如果您想包含来自 vendor 的 css，您可以使用 @import "~react-select" 导入它。 .如您所说，问题在于这将使库中的所有选择器都转换为本地选择器。为避免这种情况，您可以将导入包含在 :global 中。与使用选择器的方式相同::global { @import "~react-select"; }