使用css-loader内联Webpack + React

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

现在，您的类名将被保留。不过，我不知道你为什么要这么做。你愿意分享一下原因吗？