如果 extract_css 为假，如何让 webpacker 加载 css

Question

我有以下打包文件：

// app/javascript/packs/styles.js 
import 'bootstrap/dist/css/bootstrap'

除非我在 config/webpack.yml 中设置 extract_css: true 我不知道如何加载这些样式。

如果我设置 extract_css: true 并在布局中包含 <%= stylesheet_pack_tag 'styles' %> 一切似乎都有效。

但是，extract_css: false 的意义何在？为什么您永远不想要这个？因为它是默认的 webpacker 配置，我觉得好像缺少一些重要的东西。

Answer 1

我不是 100% 确定，但我认为如果您提取 css，webpack 将生成独立的 css 文件，因此您可以 link 它。如果你不提取它，CSS 会被捆绑在 js 文件中，webpack 将在页面加载时处理它，并将 CSS 插入 style 标签中 [=11] =] 文档的标签。

要从 js 文件中提取 CSS，它使用 mini-css-extract 插件。

在某些情况下，如果您希望仅通过一个请求获得所有 js 和 css，您可能希望将 css 保留在捆绑包中。

Answer 2

使用 extract_css: false，样式由 webpack js 运行时作为 blob url 提供，并内联注入文档 <head>（假设您有相应的 javascript_pack_tag）。

这种方法在开发中的一个用例是更好地支持 CSS 的热模块重新加载。

how to get webpacker to load css if extract_css is false