将 css-loader 与 Webpack + React 一起使用

我正在使用 Webpack 和 css-loader w/modules 构建我的 React 应用程序。我喜欢它。不过，我的大多数样式表都非常小，我想将它们内联到与我的标记和 JavaScript 相同的 JSX 文件中。

我现在使用的 CSS 加载器如下所示：

{ test: /\.(css)$/i, 
  loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") }

在我的 JSX 中，我import我单独的 CSS 文件是这样的：

import classNames from 'dashboard.css';
... 
<div className={classNames.foo}></div>;

然后将其编译并翻译成如下内容：

<div class="xs323dsw4sdsw_"></div>

但我想做的是更像下面的事情，同时仍然保留本地化模块css-loader给我：

var classNames = cssLoader`
    .foo { color: blue; }
    .bar { color: red; }
`;

... 
<div className={classNames.foo}></div>;

这可能吗？我怎样才能做到这一点而不必实际require / import一个单独的文件？

我相信你的问题是你当前的 webpack 配置使用 CSS 模块。 CSS 模块会自动重命名您的 CSS 类以避免全局类名冲突。

The fix:

// remove 'modules' from the end of your css-loader argument

{ test: /\.(css)$/i, 
  loader: ExtractTextPlugin.extract("style-loader", "css-loader?modules") }

// like so

{ test: /\.(css)$/i, 
  loader: ExtractTextPlugin.extract("style-loader", "css-loader") }

现在您的类名将被保留。虽然，我不确定你为什么要这样做。你愿意分享一下原因吗？