使用 webpack 打包 CSS答案

【问题标题】：Using webpack to bundle CSS使用 webpack 打包 CSS
【发布时间】：2016-03-28 07:36:39
【问题描述】：

我有一些 NPM mudules 正在尝试与 webpack 捆绑，因此我不必使用 CDN。

我能够弄清楚如何使 .js 文件正常工作，但我不明白如何为相同模块获取 .css 文件。

例如我有Bootstrap 有一个 NPM 模块。在我的 entry.js 文件中，我有 require('bootstrap'); 但这只会给我 javascript 文件。

我见过其他 npm 模块，例如 bootstrap-webpack 等，但我不明白如果我的 node_modules 已经有引导部分，为什么我需要下载另一个模块。 'font-awesome'、'animate.css'、'select2' 等类似的东西

我错过了什么？

【问题讨论】：

请像css-loader一样检查webpack loader
我见过它，但我真的不知道如何将它与 NPM 模块一起使用。如果我的entry.js 已经有require('bootstrap') 是否需要再写一个但bootstrap.css
由于评论被拉长，我添加了一个答案。希望对您有所帮助。

标签： javascript css node.js npm webpack

【解决方案1】：

据我所知，Bootstrap 支持 commonJS 模块加载器。因此，您可以使用 require() 加载引导 js 文件。

当您使用 require('bootstrap') 时，会加载引导程序的入口文件，然后入口文件会加载库的另一个文件部分。（其实bootstrap入口文件只加载一个文件/dist/js/bootstrap.js）[查看官方] repo(https://github.com/twbs/bootstrap/tree/master/dist/js))。

在这个过程中，如果bootstrap使用require('some.css')加载css，webpack尝试加载css。但是 require('some.css') 不是通用方法。如果没有 webpack 或 browserify 或其他构建系统，css 无法通过 require() 加载。这就是为什么你必须需要bootstrap-webpack。

此外，bootstrap 不仅可以在 webpack 中使用，还可以在 requirejs(AMD) 或 <script> 标签等常见环境中使用。所以你必须手动或者通过bootstrap-webpack来加载css。

【讨论】：