Sass与CSS Modules&Webpack

我一直在使用Webpack,Sass和CSS模块构建一个项目.通常在我的.scss文件中,我定义了一个类,如:

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

在我的React组件中,在render方法中,我需要样式:

render = () => {
    const styles = require('./MyStyles.scss');
    

}

这一切对世界都很好.一切都按预期工作.

今天我正在阅读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?output + 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我的风格？

发布后不久,我找到了解决方案.这个问题,我认为很混乱,是在我的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')绕过任何警告或错误.