2

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

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

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

$block: '.box';

#{$block} {
    //css rules

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

本质上我们是在利用 SASS 的变量插值能力，以便在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？

4

1 回答 1

1

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

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

但是，如果你想不好地使用变量插值，你可以将 SCSS 预处理器添加到你的 webpack 配置中。在这里babel-plugin-react-css-modules记录了相同的内容

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

于 2017-08-26T12:38:18.637 回答