PostCSS 重新建立 URL

npm install @csstools/postcss-rebase-url --save-dev

PostCSS 重新建立 URL 重新基数 url() 转换 CSS 时的函数.

捆绑 CSS 时,最终样式表文件的位置将不同于单个源文件.
PostCSS 重新建立 URL 重写 url() 函数使相对路径继续工作.

而不是手动绘制文件在最后输出中的位置, 您可以使用此插件
并仅使用每个源文件的相对路径.

如果你需要更多接头和拨号,请退房 postcss-url

/* when used with a bundler like `postcss-import` */

/* test/examples/example.css */
@import url("imports/basic.css");

/* test/examples/imports/basic.css */
.foo {
    background: url('../../images/green.png');
}

/* becomes */

/* test/examples/example.expect.css */
.foo {
    background: url("../images/green.png");
}

使用量

添加 PostCSS 重新建立 URL 对您的项目:

npm install postcss @csstools/postcss-rebase-url --save-dev

当作一个 邮政 插件 :

const postcss = require('postcss');
const postcssRebaseURL = require('@csstools/postcss-rebase-url');

postcss([
    postcssRebaseURL(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);