将 CSS 添加到 webpack 构建

【问题标题】：Adding CSS to webpack build将 CSS 添加到 webpack 构建
【发布时间】：2019-10-10 23:18:38
【问题描述】：

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

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

进一步阅读，任何 css 都应添加为内联样式，而这不会发生。

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

【问题讨论】：

现在很不幸。

标签： css webpack

【解决方案1】：

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

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

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

【讨论】：

谢谢理查德。