:local(.button) {
color: white;
}
在我的React组件中，在render方法中，我需要样式：
render = () => {
const styles = require('./MyStyles.scss');
<div className={ styles.button } />
}
和所有是好的与世界。一切正常工作。
现在今天我通过CSS Modules page阅读，并注意到没有一个选择器包括：local()像我的，而且他们正在导入样式：
import styles from './MyStyles.scss';
我想“哇，看起来更好，它更容易看到它的进口，等等，我不喜欢使用：local()，只是有默认的本地的东西。所以我试过，并立即遇到了几个问题。
1)`import styles from’./MyStyles.scss’;
因为我在我的React文件使用ESLint，我立即得到一个错误抛出，MyStyles.scss没有一个默认导出通常是有意义的，但CSS模块页面声明：
When importing the CSS Module from a JS Module,it exports an object with all mappings from local names to global names.
所以我自然希望样式表的默认导出是他们所指的对象。
2)我尝试从’./MyStyles.scss导入{button}
这通过linting但按钮日志为未定义。
3)如果我还原到require方法导入我的样式，任何未指定为：local是undefined。
作为参考，我的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)当使用CSS模块与Sass，我限于使用：local或：global？
2)因为我使用webpack，这是否也意味着我只能要求我的样式？
解决方法
loader: 'style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap
这使我能够1)需要我的Sass和2)包装我的样式：local。
但是，css加载程序缺少modules选项，因此它看起来像：
loader: 'style!css?modules&sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap
现在我可以导入我的样式，我不必包装他们：local(虽然我认为我仍然可以，如果我想)。
我发现最有趣的是，没有模块选项，仍然可以使用CSS模块的特性，虽然有点限制。
编辑：
我注意到，一个未来的警告，任何人谁看这个答案，是如果你使用eslint-plugin-import来删除你的javascript代码中的导入，它会在导入样式时抛出一个错误：
import styles from './MyStyles.scss';
因为CSS模块导出结果样式对象的方式。这意味着你需要做require(‘./ MyStyles.scss’)来绕过任何警告或错误。
