使用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上读到它。

然而，如果你很想使用变量插值，你可以在你的webpack配置中添加SCSS预处理器。babel-plugin-react-css-modules已经记录了相同的here

但是，它只是PostCSS，你可以添加任何plugin来满足你的需求。CSS模块并不关心。