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

Posted 2023-02-22

【中文标题】在 Webpack + React 中使用内联 css-loader

【英文标题】：Using css-loader inline with Webpack + React

【发布时间】：2015-12-22 09:09:39

【问题描述】：

我正在使用 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 一个单独的文件？

【参考方案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 文件的要求。我已经在使用 Extract + 模块，我对它们很满意。我只是想从 JavaScript 文件中触发 css-loader 功能，而不是外部化内容。