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

【问题标题】：Using webpack to load CSS files from node modules使用 webpack 从节点模块加载 CSS 文件
【发布时间】：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');

没有一个有效。

【问题讨论】：

【解决方案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 现在具有比此处提供的原始答案更有用的内置功能。请参阅下面的其他答案。

【讨论】：