Sass与CSS模块和Webpack

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

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

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

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

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

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

 import styles from './MyStyles.scss'; 

我认为“哇，看起来更好，更容易看到它的import等，而我不想使用: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我的风格？

Answer 1

发布后不久，我find了解决办法。 这个问题，我认为是相当混乱，是在我的Webpackconfiguration。 本来我的装载机看起来像：

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

这使我能够1） require我的萨斯和2）包装我的风格:local 。

但是，CSS加载程序缺lessmodules选项，因此它看起来像：

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

现在我可以import我的风格，我不必将它们包装在:local （尽pipe我认为如果我愿意，我仍然可以）。

我发现最有趣的是，没有modules选项，仍然可以使用CSS Modules-esquefunction，尽pipe有些限制。

编辑：

我注意到的一点是，如果你正在使用eslint-plugin-import在你的javascript代码中inputimport ，它会在导入样式时抛出一个错误：

 import styles from './MyStyles.scss'; 

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