使用css-loader内联Webpack + React

Question

我正在用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单独文件的情况下执行此操作？

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

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