非常教程

PostCSS 参考手册

PostCSS和源地图

配置

PostCSS对源地图支持很好。它能够读取和解析从之前转换步骤生成的映射,自动检测你期望的格式,并且输出外联和内联映射。

为了保证你生成准确的源图(源码映射),你必须写明输入与输出的CSS文件路径 - 分别使用fromto参数。

如果用默认配置生成新的源码映射,设置只要map: true即可。这会生成一个内联的源码映射,包含源码的内容。如果你不想将映射内联,你可以设置map.inline: false

processor
    .process(css, {
        from: 'app.sass.css',
        to:   'app.css',
        map: { inline: false },
    })
    .then(function (result) {
        result.map //=> '{ "version":3,
                   //      "file":"app.css",
                   //      "sources":["app.sass"],
                   //       "mappings":"AAAA,KAAI" }'
    });

如果PostCSS从之前的转变中发现源码映射,它会自动用同样的配置更新源码映射。

配置

如果你想要对源码映射的生成有更多的控制,定义可以一个map对象作为配置,并配置以下的参数:

  • inlineboolean:表明源码映射会以Base64编码注释的方式被内置到输出的CSS中。该参数默认为true。但如果先前的所有映射都是外联而不是内联的,那么PostCSS则不会内置映射即使你不设置这个参数。 如果你有一个内联的资源映射,那么result.map属性则会为空,源码因为映射被所有游戏在result.css的字幕:中。
  • prevstring,object,boolean或function:源码映射来自先前的处理步骤(例如,Sass编译).PostCSS将尝试自动读取之前的源码映射(基于源CSS中的注释),但您可以使用此配置来手动识别它。如果需要,您可以省略以前的源码映射,使用prev:false参数。
  • sourcesContentboolean:表示PostCSS应设置源码映射的源内容(例如,Sass源)。默认值为true。但如果以前的所有源码映射都不包含源内容,即使您没有设置此配置,PostCSS也会将其忽略。
  • annotation boolean或string:表示PostCSS应添加注释评论到CSS中..默认情况下,PostCSS将始终添加带路径的注释到源码映射.PostCSS不会为没包含任何评论的CSS文件添加注释。 默认情况下,PostCSS假定您要将源码映射另存为并opts.to +'。map'并在注释注释中使用此路径。可以通过为annotation提供字符串值来设置不同的路径。 如果你设置inline: true,那么注释则无法禁用。
  • fromstring:默认情况下,PostCSS将设置映射的sources属性为from选项的值。如果要覆写此行为,则你可以使用 map.from来显式设置源码映射的sources属性。路径应该是生成文件的绝对或相对路径(process()方法中)的to选项对话)。

PostCSS和源地图相关

PostCSS

PostCSS 是一个利用 JS 插件来对 CSS 进行转换的工具

PostCSS 目录

1.快速上手
2.PostCSS插件指南
3.PostCSS runner指南
4.编写自定义语法
5.PostCSS插件
6.PostCSS和源地图