如何使用docpad.coffee配置设置autoprefixer.browsers值？

Question

（找到以下所有设置信息真是太糟糕了： - /）

我可以让autoprefixer与docpad一起运行，但我（我猜）我没有成功设置browsers值......

我的环境：

• docpad 6.69.1
• IE 11，FF 31.0 + Firebug

到目前为止我尝试了什么（使用插件安装docpad：jade，less，livereload，标记为）：

简单安装有效（默认browsers设置）：

1. 的 docpad install autoprefix

我收到了一些带有一些导入的style.css.less文件，特别是一些 background: radial-gradient(...) ; background: linear-gradient(...) 规则。

1. 我将 style.css.less重命名为style.css.autoprefix.css.less （style.css.autoprefix.less无效）

到此为止，它仅适用于有关less->css或css->autoprefix次转化没有做任何应该没问题的警告。

autoprefixer添加了上述-webkit...规则的...gradient...个版本。

如果没有docpad stylus插件，

无法设置browsers？

......在我看来......所以我继续这样：

1. 的 docpad install stylus

2. 将autoprefixer手写笔设置添加到我的docpad.coffee安装文件中：

   docpadConfig = {
   
     #...
   
     plugins:
       stylus:
         stylusLibraries:
           'autoprefixer-stylus': true
         options:
           use: [
             #() -> require('autoprefixer-stylus')('ie 6')
             () -> require('autoprefixer-stylus')('ff > 3')
             #() -> require('autoprefixer-stylus')('last 2 versions')
           ]
   }
   
   # Export our DocPad Configuration
   module.exports = docpadConfig
   

效果是，现在我的style.css显然已经再次自动反映，但在上述选项之间切换没有效果。

如何使browsers设置从此处开始工作？

我从不同来源收集到的所有设置信息，所以我可能错过了一些东西。也许已经可以在没有手写笔插件的情况下配置browsers设置？

这些来源帮助我或多或少地达到了这一点：

• https://www.npmjs.com/package/docpad-plugin-autoprefix
• https://www.npmjs.com/package/autoprefixer
• https://www.npmjs.com/package/docpad-plugin-stylus
• https://www.npmjs.com/package/autoprefixer-stylus
• http://blog.sapegin.me/all/css-workflow
• https://github.com/kizu/docpad-test/blob/master/docpad.coffee

我的主要测试用例

手动在我的css中添加其他-moz-radial-gradient... / -moz-linear-gradient...规则会向我显示正确的渐变。删除它们不会显示任何渐变（甚至不是标准语法，也不依赖于使用autoprefixer ......这可能是一个无关的/遗留问题，因为我希望更复杂的 style.css 至少逐步更改上述{​​{1}}选项更改。）

Answer 1

它有效 - 问题出现在其他地方！

因此问题已经包含了如何设置的答案 ...

以下 渐变相关问题让我检查了我的渐变语法：

https://github.com/artpolikarpov/fotorama/issues/91

遵循规范：http://www.w3schools.com/css/css3_gradients.asp

更彻底，自改变以来

background: linear-gradient( top,         red,  yellow);
background: radial-gradient( top right,   red,  yellow);

到

background: linear-gradient( to bottom left,                        red,  yellow )
background: radial-gradient( ellipse farthest-corner at top right,  red,  yellow )

它就像一个魅力： - ）