我正在使用Parcel将SCSS打包到使用postCSS。
我的postCSS配置只有autoprefixer和tailwind。
我的scss文件如下:
@font-face {
font-family: NBE;
src: url('../fonts/NBE-Regular.eot');
src: url('../fonts/NBE-Regular.eot#iefix') format('embedded-opentype'),
url('../fonts/NBE-Regular.woff2') format('woff2'),
url('../fonts/NBE-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
但输出
@font-face {
font-family: NBE;
src: url("/NBE-Regular.f90b15ca.eot");
src: url("/NBE-Regular.f90b15ca.eot#iefix") format("embedded-opentype"),
url("/NBE-Regular.6b2ab3ea.woff2") format("woff2"),
url("/NBE-Regular.2ec20d61.woff") format("woff");
font-weight: normal;
font-style: normal;
}
请注意url()下的位置，因此为字体文件获取404。
我不知道这个哈希或版本是什么
为什么它会这样改变URL ?
更新:我注意到所有这些文件都被复制到dist文件夹，但是该文件夹不是根文件夹，所以URL仍然是错误的。
虽然这是一个老问题，您可能已经解决了它，但我遇到了类似的情况，并按照以下方法解决了它。也许它能帮助别人。
注意:以下不是postCSS的设置，而是Parcel v2的设置。
阻止包裹处理某些链接文件
package -resolver-ignore插件允许你指定处理时要忽略的文件模式或文件路径。您可以针对特定的文件，也可以针对在其他文件中引用的文件，这使得可以跳过对sass/css文件中某些文件模式的处理。这可以防止复制链接文件和伴随的url重写。
-
安装插件并创建
.parcelrc配置文件(或扩展现有的配置文件)，如软件包自述。 -
然后将
parcelIgnore块添加到package.json文件中，如下所示。
"parcelIgnore": [
"img/.+",
"fonts/.+"
],
跳过在sass/css文件中引用的/fonts和/img文件夹中的任何文件。您的构建脚本不会抛出"未找到";错误，文件没有复制到dist文件夹，url仍然是你最初在sass文件中指定的。
复制静态资产而不进行处理
如果你需要复制你的静态资源到你的dist文件夹，你可以使用package -reporter-static-files-copy插件，它允许你指定一个静态文件的源文件夹(根据需要在子文件夹中)，这些文件被复制到你的dist文件夹而不做任何处理。
安装插件并创建
.parcelrc配置文件(或扩展现有的配置文件)，如软件包自述。在你的源文件夹中创建一个
static目录，并将你的资源放在那里。如果你想使用你自己的文件夹名，在你的package.json文件中添加一个staticFiles块，如下所示，指定要复制的文件夹和一个你的dist文件夹的子目录。
"staticFiles": {
"staticPath": "./src/public",
"staticOutPath": "assets"
}
你的构建过程现在将复制所有的静态资源到你的dist文件夹。