早午餐与 SugarSS(PostCSS 解析器)

我如何开始在早午餐中使用 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"
  }
}

最佳答案

早午餐的 PostCSS 插件的工作方式是，在所有样式表编译并连接成一个文件后调用它。 (早午餐称之为优化器插件)
然而，支持 SugarSS 或类似的东西需要创建一个自定义的编译器插件，它只会将 sss 转换为普通的 css。
它实际上比听起来容易 :) 使用 plugins.md 作为插件 API 引用。如果有帮助，请查看 stylus-brunch — https://github.com/brunch/stylus-brunch/blob/master/index.js 。
你基本上需要改变的是:

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

将 prototype.extension 更改为您要处理的扩展名，在本例中为 sss

您可能不需要手写笔的 constructor()，也可能不需要 css 模块支持

您可以发布它，以便其他希望在 Brunch 中使用 SugarSS 的人不会自己这样做。分享就是关怀，对吧？ :)
(如果你确实走这条路，习惯上用后缀命名早午餐插件，比如 sugarss-brunch 。然后你也可以将它包含在我们的插件列表中 https://github.com/brunch/brunch.github.io/blob/master/plugins.json )

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

关于早午餐与 SugarSS(PostCSS 解析器)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36444966/