Sass与CSS模块和Webpack

我已经使用Webpack，Sass和CSS模块构建项目已有一段时间了。通常，在我的.scss文件中，我定义一个类，如：

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

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

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

世界一切都很好。一切正常。

今天，我阅读了CSS Modules页面，发现没有一个选择器被我的包围: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记录为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）当将CSS模块与Sass一起使用时，我仅限于使用:local或:global吗？

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