使用 React CSS 模块的 SASS 变量插值

Question

我在一个使用 React 的项目中工作，我们使用 SASS 编写样式，然后让 webpack 完成剩下的工作。

我们最近才开始使用 CSS 模块（确切地说是babel-plugin-react-css-modules）并且过渡非常顺利，除了一件事。

在 CSS 模块之前，我们使用的是 BEM 命名约定。我们经常会在组件的 .scss 文件中做这样的事情：

$block: '.box';

#{$block} {
    //css rules

    &#{$block}--modifier {
        //other rules
    }
}

本质上，我们利用了 SASS 的 variable interpolation 能力，以便在 block 级别元素的类名很大的情况下减少写入。

问题是，据我所知，对于这种情况，变量插值不再适用于babel-plugin-react-css-modules。

我收到类似

的错误

ERROR in ./src/index.jsx
Module build failed: Error: E:/Mitch/Workspace/Projects/testbed/src/index.jsx: Could not resolve the styleName 'box'.

我知道，有了作用域的 CSS 规则，真的没有必要再写像 .box__list 这样的东西了，因为你可以简单地写 .list，因为它的作用域是组件，但只是为了好奇，这可能吗让 SASS 的变量插值与 babel-plugin-react-css-modules 一起工作？

Answer 1

CSS 模块允许您使用本地范围的类名和动画名。这是它的绝对功能。

他们还提供了composes 关键字，因为它有助于在单个文件中维护自给自足的组件文件，而无需重复。这与 SCSS @extends 类似，但有所不同。 你可以阅读它here

但是，如果您不希望使用变量插值，您可以将 SCSS 预处理器添加到您的 webpack 配置中。 babel-plugin-react-css-modules 记录了相同的 here

但是，它只是 PostCSS，您可以添加任何 plugin 以满足您的需求。 CSS 模块不在乎。