使用 webpack 从节点模块加载 CSS 文件

Posted 2023-02-22

【中文标题】使用 webpack 从节点模块加载 CSS 文件

【英文标题】：Using webpack to load CSS files from node modules

【发布时间】：2016-07-12 13:58:50

【问题描述】：

我正在尝试使用包含 css 文件的 react component。我像往常一样需要组件：

var Select = require('react-select');

我想知道如何要求组件所需的 css。

我已经试过了：

require('react-select/dist/react-select.css');

还有这个：

require('react-select.css');

没有一个有效。

【问题讨论】：

您遇到什么错误？你的 webpack 配置是什么？

【参考方案1】：

确保您已安装以下软件包：

npm install style-loader css-loader --save-dev

你的 webpack 配置有这个：

module: 
  loaders: [
     test: /\.css$/, loader: "style-loader!css-loader" 
  ]

这将需要并捆绑您需要的任何 css 文件，我会完全按照您的操作方式提取它们：

require('react-select/dist/react-select.css');

另一个可行的解决方法是您复制该 css 文件，并在 html 中通过以下方式链接它：

<link rel="stylesheet" href="/path/to/react-select.css">

【讨论】：

我的 webpack 配置文件中有那个配置

这是正确的答案，但是对于像我这样的新手 - 确保你安装了 style-loader 和 css-loader 插件，以便 webpack 可以读取它们。

@Birksy89 对于新人来说，运行这个npm install style-loader css-loader --save-dev，如果你决定按照documentation将CSS拆分到它自己的文件中，一定要删除require中的显式css标记提到here

@nmu 我是个新人，你把我从漫长的一天中拯救了出来。

@nmu 所以你只是在开发中安装 CSS 和样式的加载器，而不是在生产中使用 CSS？

【参考方案2】：

（已删除答案）Webpack 现在具有比此处提供的原始答案更有用的内置功能。请参阅下面的其他答案。

【讨论】：

这行得通，但老实说，我不想要求 node_modules 文件夹中的文件