NodeJS 如何为字体文件/ url进程配置postCSS位置？

wkyowqbh 于 2023-03-08 发布在 Node.js

关注(0)|答案(1)|浏览(212)

我正在使用Parcel将SCSS打包到使用postCSS。
我的postCSS配置只有自动前缀和顺风。
我的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仍然是错误的。

node.js

来源：https://stackoverflow.com/questions/65958270/how-to-configure-postcss-location-for-font-file-url-proccess

1条答案

按热度按时间

sg24os4d1#

这是一个老问题，你可能已经解决了它，我也遇到过类似的情况，我的解决方法如下。

注意：以下设置不是postCSS的设置，而是Parcel v2的设置。*

阻止宗地处理某些链接的文件

parcel-resolver-ignore插件允许您指定处理时忽略的文件或文件路径的模式。您可以针对特定的文件，也可以针对其他文件中引用的文件，这使得跳过处理sass / css文件中的某些文件模式成为可能。这可以防止复制链接的文件以及随之而来的url重写。
1.安装插件并创建.parcelrc配置文件（或扩展现有配置文件），如package readme中所述。
1.然后将parcelIgnore块添加到package.json文件，如下所示。

"parcelIgnore": [
    "img/.+",
    "fonts/.+"
],

sass/css文件中引用的/fonts和/img文件夹中的任何文件都将被跳过。构建脚本不会抛出“未找到”错误，文件不会复制到dist文件夹，url仍保持为您最初在sass文件中指定的url。

复制静态资产而不进行处理

如果需要将静态资源复制到dist文件夹中，可以使用parcel-reporter-static-files-copy插件，它允许您指定静态文件的源文件夹（根据需要在子文件夹中），这些静态文件无需任何处理即可复制到dist文件夹中。
1.安装插件并创建.parcelrc配置文件（或扩展现有配置文件），如package readme中所述。
1.在源文件夹中创建一个static目录，并将资源放置在其中。如果要使用自己的文件夹名称，请向package.json文件添加一个staticFiles块，如下所示，指定要复制的文件夹，并可选地指定要将资源复制到的dist文件夹的子目录。

"staticFiles": {
    "staticPath": "./src/public",
    "staticOutPath": "assets"
}

您的构建过程现在将跨所有静态资产无更改地复制到您的dist文件夹。

赞(0）回复(0）举报 2023-03-08

我来回答

NodeJS 如何为字体文件/ url进程配置postCSS位置？

1条答案

阻止宗地处理某些链接的文件

复制静态资产而不进行处理

相关问题

热门标签

最新问答