Sass与CSS Modules＆Webpack

Question

我一直在使用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 Modules页面说明：

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

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

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

这会将linting但button日志传递为undefined。

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我的风格？

Answer 1

发布后不久，我找到了解决方案。 这个问题，我认为很混乱，是在我的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代码中的导入，它会在导入样式时引发错误：

import styles from './MyStyles.scss';

因为CSS模块导出生成的样式对象的方式。 这意味着您将被要求执行require('./MyStyles.scss')以绕过任何警告或错误。