css - 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 page，发现没有一个选择器像我的那样被:local()包含，此外，它们还导入了以下样式:

import styles from './MyStyles.scss';

我想:“哇，看起来好多了，更容易看到它的导入位置，而且。我很想不使用:local()，而默认将其设置为本地。”所以我尝试了一下，立即遇到了几个问题。

1)`从'./MyStyles.scss'导入样式；

因为我在我的React文件上使用ESLint，所以我立即收到一个错误消息:MyStyles.scss没有默认的导出，通常这是有意义的，但是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)当将CSS模块与Sass一起使用时，我是否只能使用:local或:global？

2)由于我使用的是webpack，这是否还意味着我只能require我的样式？

最佳答案

发布后不久，我想出了解决方案。我认为这很令人困惑的问题是在我的Webpack配置中。最初，我的装载机看起来像:

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

这使我能够1)将Sass设置为require和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')来绕过任何警告或错误。

关于css - Sass与CSS模块和Webpack，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34443827/