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

Question

我正在尝试使用 react component其中包括一个 css 文件。我像往常一样需要组件:

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

我想知道如何获取组件所需的 css。

我已经试过了:

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

还有这个:

require('react-select.css');

没有一个有效。

Answer 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">