单个函数/go 中多个文件的 Css Autoprefixer？

Question

我的 Angular2 元素有 100 多个 Css 文件，这些文件没有任何前缀，例如 :Mozila、:Chrome 等，我想要一些工具或任何 gulp 任务或任何可以将我的所有 css 文件转换为具有前缀的文件的东西.

我试过了

https://github.com/postcss/autoprefixer

但没有按照我的用例工作，

那有可能吗？如果是怎么办？

Answer 1

既然你问了一个答案:

在你的IDE中(我以Visual Studio Code为例):

• Ctrl+Maj+F 将启动全局搜索(或在左侧工具栏上单击放大镜)
• 激活“按正则表达式搜索”选项(由 .* 表示)

• 输入您的正则表达式。是这样的

  ^\s*([a-z-]*)\s*:\s*([\d\w-()"\s\.:=!@]*);?\s* $

• 在第二个字段中，使用类似于

  moz-$1: $2;\nsafari-$1: $2;

它将向正则表达式找到的每个属性添加“moz-”。

当然我打得很快，所以你必须做一些调整，但想法就在这里。

聊天后编辑这是解释:

• 以^开头，意思是“行从这里开始”
• 然后\s* 表示“行以您想要的任意多个制表符或空格开始”
• ([a-z-]*) 表示“查找包含 a 到 z 字母和 - 字符的属性”
• \s* 同上，一些空格
• the : for the : 在每个 css 属性中
• 再次，\s*
• ([\d\w-()"\s.:=!@]*) 表示“查找包含字母、数字、空格和列出的每个特殊字符 (.:=!@) 的属性值”
• 然后我们用 ; 结束这一行(出现零次或一次)
• 然后用\s* 给你多少空间
• 和$表示行尾(与开头的^相反)

回答它是如何可能的:当您将括号放在正则表达式中时，它会“捕获”它找到的内容并将其注册到以 $ 符号开头的变量中。这就是您在替换字符串中写入 $1、$2 的原因，因为它捕获了属性名称和属性值。\n 允许换行，您所要做的就是像那样放置任意数量的前缀!