Question

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

Answer 1

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

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

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

您基本上需要改变的是：

compile()方法，使用SugarSS解析器调用PostCSS并返回一个解析为至少具有data键的对象的约束（在您的情况下将是一个字符串css）
将prototype.extension更改为您要处理的扩展程序，在这种情况下为sss
你可能不会需要手写笔＆＃39; constructor()并且可能不需要css模块支持
你可以释放它，以便其他想要使用SugarSS with Brunch的人自己也不会这样做。分享很关心，对吧？ :)

（如果您确实采用了这种方式，通常会使用后缀命名早午餐插件，例如sugarss-brunch。您也可以将其包含在我们的插件列表中https://github.com/brunch/brunch.github.io/blob/master/plugins.json）< / p>

希望这会让事情变得清晰起来。如果您遇到任何问题，请随时在那里发表评论或在我们的GitHub上发布问题http://github.com/brunch/brunch

SugarSS早午餐（PostCSS解析器）

1 个答案: