在 Webpack + React 中使用内联 css-loader

Question

我正在使用 Webpack 和带有模块的 css-loader 构建我的 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 一个单独的文件？

Answer 1

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

修复：

// 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") }

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