css - 带有 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'.

我明白，有了 scoped 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 模块不关心。