早午餐与 SugarSS（PostCSS 解析器）答案

【问题标题】：Brunch with SugarSS (PostCSS parser)早午餐与 SugarSS（PostCSS 解析器）
【发布时间】：2016-07-26 11:48:54
【问题描述】：

如何开始使用 SugarSS parser 搭配早午餐？

这是我当前配置的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"
  }
}

【问题讨论】：

标签： brunch postcss

【解决方案1】：

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

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

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

你基本上需要改变的是：

将prototype.extension 更改为您要处理的扩展名，在这种情况下为sss
您可能不需要手写笔'constructor() 并且可能不需要 css 模块支持
您可以发布它，这样其他希望在早午餐中使用 SugarSS 的人就不会自己这样做了。分享就是关怀，对吧？ :)

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

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

【讨论】：