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

发布后不久,我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')绕过任何警告或错误。