SugarSS早午餐(PostCSS解析器)

Question

我如何开始在Brunch中使用SugarSS解析器？

下面是我当前配置的plugins部分：

exports.config = {

  ...

  plugins: {
    babel: {
      ignore: [/web\/static\/vendor/]
    },
    postcss: {
      processors: [
        require("postcss-cssnext")(["last 3 versions"]),
        require("precss"),
        require("lost")
      ]
    },
    cssnano: {
      autoprefixer: {
        add: false
      }
    }
  }

  ...

};

还有我的package.json

{
  "repository": {},
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "~2.1.3",
    "css-brunch": "~1.7.0",
    "cssnano": "^3.5.2",
    "cssnano-brunch": "^1.1.5",
    "javascript-brunch": "~1.8.0",
    "lost": "^6.7.2",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html",
    "postcss-brunch": "^0.5.0",
    "postcss-cssnext": "^2.5.1",
    "postcss-scss": "^0.1.7",
    "precss": "^1.4.0",
    "sugarss": "^0.1.2",
    "uglify-js-brunch": "~1.7.0"
  }
}

Answer 1

用于早午餐工作的PostCSS插件的方式是，在编译所有样式表并连接到单个文件后调用它。(早午餐调用优化器插件)

然而，对SugarSS或类似的支持将需要创建一个定制的编译器插件，这个插件只会将sss转换成普通的css。

它实际上比听起来容易得多:)使用plugins.md作为插件API引用。如果有帮助，请看一下stylus-brunch - https://github.com/brunch/stylus-brunch/blob/master/index.js。

基本上你需要改变的是：

1. compile()方法，使用SugarSS解析器调用SugarSS，并将解析结果返回给至少使用data键的对象(在您的示例中，该承诺将是字符串css)。
2. 将prototype.extension更改为要处理的扩展，在本例中为sss
3. 您可能不需要手写笔的constructor()，也可能不需要css模块的支持
4. 您可以发布它，这样其他想要在Brunch上使用SugarSS的人就不会自己这么做了。分享就是关心，对吗？:) (如果你真的这么做了，习惯上用后缀来命名早午餐插件，比如sugarss-brunch。然后，您也可以将它包括在插件https://github.com/brunch/brunch.github.io/blob/master/plugins.json列表中)

希望这能把事情弄清楚一点。如果您遇到任何问题，请随意评论，或者在我们的GitHub http://github.com/brunch/brunch上打开一个问题。