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

Question

我正在尝试使用包含css文件的react组件.我像往常一样要求组件:

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

Answer 2

//package.json
"dependencies": {
    "my-package": "2.0.0"
}
//app.js
//Get a relative path to the installed css files:
require('../someRelativePathFromAppJs/node_modules/my-package/somePath/myNeeded.css')