使用webpack中的css智能导入js lib

Question

我厌倦了每次手动下载js和css lib，然后当我开始一个反应项目时，我跳进了npm和webpack。但是有一些问题：

1. 使用npm install很好，但我必须知道css / js / scss放在哪里，它们可能是：

   node_modules\materialize-css\sass\materialize.scss
   node_modules\materialize-css\dist\js\materialize.min.js
   node_modules\sweetalert\dist\sweetalert.min.js
   node_modules\sweetalert\dist\sweetalert.css
   node_modules\hint.css\hint.min.css
   ...
   

   我仍然需要自己找到正确的路径，并添加到index.html或导入index.js，就像之前一样，但它确实减少了搜索lib的下载链接的时间）

   < / LI>

2. 有很多js lib包含css文件，但webpack不是那么容易添加一个包含css和js的lib：

   比如webpack-import-bootstrap-js-and-css，必须添加这么多的配置代码来进行css导入，为什么我不在index.html包含css？它只是一行。不过单独的js，css导入不同的文件也让我觉得不舒服。

我希望有一种方式：

1. npm install --save sweetalert

2. 添加webpack配置，类似（不需要知道lib的结构）：

   ...
   new webpack.ProvidePlugin({
     swal: "sweetalert",
     use_css: true, // false for someone need custom theme
     use_js: true
   }),
   ...
   

但我现在找不到好办法。

Answer 1

您可以提供.css文件的路径。这对我有用：

import swal from 'sweetalert'
import 'sweetalert/dist/sweetalert.css'