IT技术 - 在 Webpack + React 中使用内联 css-loader - 吾爱随笔录

我正在使用 Webpack 和带有module的 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给我的本地化module：

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

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

这可能吗？如何在不必实际require/import单独文件的情况下执行此操作？

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