使用 SugarSS（PostCSS 解析器）早午餐

Question

如何开始使用 SugarSS parser 和 Brunch？

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

用于 brunch 的 PostCSS 插件的工作方式是，在编译所有样式表并将其连接到单个文件后调用它。（Brunch 称之为 optimizer 插件）

支持 SugarSS 或类似软件，但是，需要创建自定义 编译器 插件，它只会将 sss 转换为正常 css。

实际上比听起来容易 :) 使用 plugins.md as a plugin API reference. If it helps, take a look at stylus-brunch — https://github.com/brunch/stylus-brunch/blob/master/index.js.

您基本上需要更改的是：

compile() 方法，用 SugarSS 解析器和 return 调用 PostCSS 一个承诺，该承诺至少具有 data 键（在您的大小写将是一个字符串 css)
将 prototype.extension 更改为您要处理的扩展名，在本例中为 sss
您可能不需要手写笔constructor()并且可能不需要css模块支持
您可以发布它，这样其他希望将 SugarSS 与 Brunch 结合使用的人就不必自己动手了。分享就是关怀，对吧？ :)

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

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

上提出问题

使用 SugarSS（PostCSS 解析器）早午餐

Brunch with SugarSS (PostCSS parser)

brunch

postcss