使用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记录了相同的plugin

但是，它只是PostCSS，您可以添加任何https://github.com/tom555cat/WebRTCTest.git以满足您的需求。 CSS模块并不关心。