调整方向- cs

更新相对资产URL(例如. url(../images/something.png))在CSS的字符串内,以反映CSS文件的迁移.

示例使用大小写 : 如果你从CSS里插入 styles/main.css 改为 a <style> 元素在 index.html (作为旨在减少HTTP回程的构建任务的一部分),您可以使用此功能来重写 CSS 内的所有图像/font URL , 这样它们仍然从新的相对基础工作 —— 在这个例子中, 它会预先将所有文件相关的 URL 与 style/ (并解决任何 .. (见e/cn.4/sub.2/2000/l.31).

使用量

npm install reorient-css

var reorientCSS = require('reorient-css');

var result = reorientCSS(
  'body { background: url(something.png); }', // css string
  'some/old/stylesheet/file.css',             // old css location
  'some/new/one.css'                          // new css location (this could even be an .html file,
);                                            // if you're inlining the CSS into a <style> element
                                              // - the basename is ignored anyway)

console.log(result.css);
// > body { background: url('../old/stylesheet/something.png'); }

页:1

• 它并不在意文件是否存在于旧/新路径上——它只是利用这些路径字符串来确定从新位置回旧位置的相对路径,因此它可以知道如何重写资产URL.
• 仅重写文件相关的 URL 。 根相干、绝对和 data: URL将保持不变,因为无论CSS文件的位置如何,它们预期都会同样发挥作用.
• behavior 属性(专有 IE thing)将保持不变,因为这些属性中的任何URL都是相对于 HTML 文档,而不是 CSS 文件的,所以理论上它们不应该改变.
  • 唯一的例外是,如果您正在将 CSS 从一个 HTML 文档移动到另一个文档( e, 以 < style> 元素) 。 如果您提供的新的和旧的CSS地点 .html 文档, behavior 属性 将 调整方向.
• 空白空间和格式化没有变化.
• 输出是带有属性的对象 css,其中包含重定向 CSS 字符串。 此对象也可能包含 map 属性,如果您指定了该选项(见下文).

选项

函数接受一个可选的第四个参数: 附加选项的对象可传递到 邮政。例如, {map: true} 将指示它生成一个源地图(该地图将在 map 键。 见 计算机辅助系统 更多细节.

邮政

重定向-cs也可用作 邮政 处理器.

var postcss = require('postcss'),
    reorientCSS = require('reorient-css');

var result = postcss()
    .use( reorientCSS.processor( 'some/old/stylesheet/file.css', 'some/new/one.css' ) )
    .process( 'body { background: url(something.png); }' );

console.log(result.css);
// > body { background: url('../old/stylesheet/something.png'); }

许可证

版权 (c) 2014 Callum Locke. 持有麻省理工学院执照.