Sass 与 CSS 模块和 Webpack

Question

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

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

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

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

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

今天我正在阅读 CSS Modules page 并注意到 none 的选择器像我的一样被 :local() 包围，而且他们正在导入如下样式：

import styles from './MyStyles.scss';

我想 "Wow that looks much nicer, it's easier to see where it's imported, ect. And I'd love not to use :local() and just have things local by default." 所以我试了一下，立即运行遇到了几个问题。

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

因为我在我的 React 文件上使用了 ESLint，所以我立即收到一个错误，提示 MyStyles.scss 没有通常有意义的默认导出，但是 CSS 模块页面声明:

When importing the CSS Module from a JS Module, it exports an object with all mappings from local names to global names.

所以我自然希望样式表的默认导出也是他们所指的对象。

2) 我试过了import { button } from './MyStyles.scss';

这通过了 linting，但 button 记录为未定义。

3) 如果我恢复到导入样式的 require 方法，则未使用 :local 指定的任何内容都是未定义的。

作为参考，我的 webpack 加载器（我还包括 Node-Neat and 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 模块式的功能，尽管有些限制。

编辑：

我注意到的一点是，如果您使用 eslint-plugin-import 对 javascript 代码中的导入进行 lint，它会抛出一个错误导入样式如：

import styles from './MyStyles.scss';

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

Sass 与 CSS 模块和 Webpack

Sass with CSS Modules & Webpack

css

reactjs

sass

webpack

css-modules