Question

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

: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）`从'./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

发布后不久，我找到了解决方案。这个问题，我认为很混乱，是在我的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 Modules-esque功能，尽管有些限制。

编辑：

我注意到的一些事情是，未来警告任何看过这个答案的人，如果您使用eslint-plugin-import来修改javascript代码中的导入，那么在导入样式时会引发错误：

import styles from './MyStyles.scss';

因为CSS Modules导出生成的样式对象的方式。这意味着您需要require('./MyStyles.scss')来绕过任何警告或错误。

Sass with CSS Modules＆amp;的WebPack

1 个答案: