css - 如何在开发模式下在 webpack 中创建单独的 .css 文件？不是虚拟发出的，而是内置在项目目录中

Question

问题是，我已经配置了我的虚拟主机，所以我需要处理的网站不在 localhost:8080 下。

现在我的 webpack 将我的样式放入 .html 文件之间<style></style>，并且仅用于生产它在我的项目目录中创建一个文件。但我需要在开发模式下创建一个单独的文件。在http://localhost:8080下没有“发射” ，因为这样我在 .css 文件中的所有路径都指向“localhost:8080/assets/...”

当我把它放到我的项目中时：

<link rel="stylesheet" href="http://localhost:8080/style.css" type="text/css" media="all">

它可以工作，但是图像路径被破坏，因为浏览器从“localhost：8080/assets ...”而不是“myproject.domain/assets ...”加载它们

所以我发现在我的目录中创建一个 style.css 文件就可以完成这项工作，但这我只能在生产模式下实现，然后我的样式就生成了......知道如何在开发中实现这一点吗？或者一些解决方法？

我相信这个问题很笼统，我不需要输入我的代码。我只使用：MiniCssExtractPlugin / style-loader、css-loader、sass-loader。

标签： csswebpackpath

Answer 1

如果 img 在您的根目录下，您可以在没有 localhost 的情况下使用 /your_img_path。