Webpack：如何从css-loader导出css文件？

Question

我有这样的应用结构：

/src
    /app.js
    /styles.css
    /images
           /img.png

app.js文件内容为：

const styles = require('./styles.css');
console.log(styles) // => here I want to have a url to the css file under the public folder

src/styles.css文件内容如下：

.element {
  background: url(./images/img.png);
}

因此，js文件需要css文件。而css文件需要png文件。

我希望将所有文件导出到公共文件夹：

公开/ app.js

const styles = 'styles.css' // => path to public/styles.css
console.log(styles)

耻骨/ styles.css的

.element {
  background: url(img.png); /* path to public image file */
}

public / img.png （来源图片副本）

文件名并不重要。公用文件夹输出是重要的。 Css文件作为单独的文件导出，它包含图像的正确路径。 JS文件知道公共css文件的路径。

如果没有图像，file-loader可用于导入css文件。但在我的情况下，css文件首先由css-loader处理，以便解析url()路径。

在css-loader之前应用file-loader会导致错误，因为它会返回JS代码而不是CSS。

有没有办法建立一个管道来实现想要的结果？

Answer 1

我认为您正在寻找Extract Text Plugin。这个名字可能听起来有点......关闭，但它基本上就是你所描述的。

您可以使用多个加载器来解析图像路径，处理SCSS，自动修复属性等。