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

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

使用css-loader内联Webpack + React

1 个答案: