45

我一直在使用 Webpack、Sass 和 CSS 模块构建一个项目。通常在我的.scss文件中，我定义一个类，如：

:local(.button) {
    color: white;
}

在我的 React 组件中，在render方法中，我需要样式：

render = () => {
    const styles = require('./MyStyles.scss');
    <div className={ styles.button } />
}

世界上一切都很好。一切都按预期工作。

现在，今天我正在阅读CSS 模块页面，并注意到没有一个选择器包含在:local()我的范围内，而且他们正在导入如下样式：

import styles from './MyStyles.scss';

我想“哇，看起来好多了，更容易看到它是在哪里导入的，等等。而且我不想使用:local()，默认情况下只有本地的东西。” 所以我尝试了一下，并立即遇到了几个问题。

1) `从'./MyStyles.scss'导入样式；

因为我在我的 React 文件上使用 ESLint，我立即收到一个错误，该错误MyStyles.scss没有默认导出，这通常是有意义的，但 CSS 模块页面指出：

从 JS 模块导入 CSS 模块时，它会导出一个具有从本地名称到全局名称的所有映射的对象。

所以我自然希望样式表的默认导出也是他们所指的对象。

2）我试过import { button } from './MyStyles.scss';

这会通过 linting 但button记录为未定义。

3) 如果我恢复到require导入样式的方法，则未指定的任何内容:local都是未定义的。

作为参考，我的 webpack 加载器（我还包括Node-Neat和Node-Bourbon，两个很棒的库）：

{ test: /.(scss|css)$/, loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap&includePaths[]=' + encodeURIComponent(require('node-bourbon').includePaths) +
'&includePaths[]=' + encodeURIComponent(require('node-neat').includePaths[1]) + '&includePaths[]=' + path.resolve(__dirname, '..', 'src/client/') }

在所有这些之后，我的问题是：

1）当使用带有 Sass 的 CSS 模块时，我是否仅限于使用:local或者:global？

2）由于我使用的是 webpack，这是否也意味着我只能使用require我的样式？

4

1 回答 1

44

发布后不久，我想出了解决方案。我认为很混乱的问题出在我的 Webpack 配置中。最初我的装载机看起来像：

loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

这使我能够 1)require我的 Sass 和 2) 将我的样式包装在:local.

但是，css 加载器缺少该modules选项，因此它看起来像：

loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap

现在我可以import自己的风格，我不必把它们包裹起来:local（尽管我想如果我愿意的话我仍然可以）。

我发现所有这一切最有趣的是，没有该modules选项，人们仍然可以使用 CSS 模块式的功能，尽管有些限制。

编辑：

我注意到的一点是，对任何查看此答案的人的未来警告是，如果您使用eslint-plugin-import对 javascript 代码中的导入进行 lint，它将在导入样式时引发错误，例如：

import styles from './MyStyles.scss';

由于 CSS 模块导出生成的样式对象的方式。这确实意味着您需要require('./MyStyles.scss')绕过任何警告或错误。

于 2015-12-23T21:34:04.493 回答