css - 将 CSS 添加到 webpack 构建

标签 css webpack

我有一个相当简单的 webpack 元素 - 使用 Webpack 指南构建。参见 https://github.com/timburgess/webpack-postcss-tailwind

src 目录中有一个 style.css,但在构建时没有将 .css 添加到 /dist 目录。

进一步阅读,任何 css 都应作为内联样式添加,但这种情况并未发生。

通过 https://github.com/webpack-contrib/mini-css-extract-plugin 解决根据理查兹的回答。

最佳答案

Webpack 将打包通过 import 引用的 css 文件将源 javascript 文件中的语句放入输出 javascript 文件 (bundle.js)。您将看到在运行时通过内联将类应用于 webapp <style>动态应用于 html 的标签。

许多开发人员认为这种行为不合适,会使用特殊插件让 webpack 生成单独的 bundle .css然后使用传统(和缓存友好)<link rel="stylesheet" type="text/css" href="bundle.css"> 在 html 中引用的文件标签。见:

https://github.com/webpack-contrib/mini-css-extract-plugin

关于css - 将 CSS 添加到 webpack 构建,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58332287/

相关文章:

css - Bootstrap 容器背景只能是白色或其他颜色/图像但不能透明

javascript - 如何让我的 JQueryUI 可拖动元素 float 到另一个溢出元素中?

webpack - 使用样式组件进行 Preact 会导致浏览器控制台出现错误

javascript - 带有 prod 参数的 webpack

reactjs - 延迟加载 react-router-dom,webpack 不工作

wordpress - Roots Sage - Bud 构建不加载自定义字体,并显示 resolve-url-loader 警告

css - Bootstrap 3 -- 如何在同一行中使用不同的字体大小,同时对齐底部的所有文本

javascript - 不确定如何定义函数并在 javascript 中调用它

javascript - 缩小浏览器时元素宽度不起作用?

webpack - 我收到一个 webpack 警告严重依赖项 : the request of a dependency is an expression when use koa