css - 在 webpack 中巧妙地导入带有 css 的 js lib

Question

我厌倦了每次都手动下载 js 和 css 库，然后在开始一个 React 元素时跳入 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的下载链接)

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 配置，比如(不需要知道库的结构):

   ...
   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'