我有一个这样的应用程序结构:
/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文件。
我希望将所有文件导出到公用文件夹:
public / app.js
const styles = 'styles.css' // => path to public/styles.css
console.log(styles)
pubic / 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。有没有一种方法可以构建管道来达到想要的结果?
最佳答案
我认为您正在寻找Extract Text Plugin。这个名字听起来可能有点……不对,但实际上它所做的就是您所描述的。
您可以使用多个加载程序来解析图像路径,处理SCSS,自动前缀属性等。
关于javascript - Webpack:如何从css-loader导出css文件?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43073001/