3

如何开始使用带有早午餐的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"
  }
}
4

1 回答 1

2

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

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

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

你基本上需要改变的是：

  1. compile()方法，使用 SugarSS 解析器调用 PostCSS 并返回一个 promise，该 promise 解析为至少具有data键的对象（在您的情况下将是字符串 css）

  2. 更改prototype.extension为您要处理的扩展名，sss在这种情况下

  3. 你可能不需要手写笔constructor()，也可能不需要 css 模块支持

  4. 你可以发布它，这样其他想要在早午餐中使用 SugarSS 的人就不会自己这样做了。分享就是关怀，对吧？:)

    （如果你确实走这条路，习惯上用后缀来命名早午餐插件，比如sugarss-brunch。你也可以将它包含在我们的插件列表中https://github.com/brunch/brunch.github.io/blob/master /plugins.json )

希望这能澄清一点。如果您遇到任何问题，请随时在此处发表评论或在我们的 GitHub http://github.com/brunch/brunch上打开问题

于 2016-04-19T10:53:12.223 回答