Ember / PostCSS / Tailwind - 在哪里解析指令？

Question

我组装了 ember、postcss 和 tailwind 的香草组合，但对于我的生活，我无法理解为什么这段代码有效。

对于带有 postcss 和 tailwind 的通用 ember 应用：

ember new poc-tailwind --yarn
ember install ember-cli-postcss
yarn add tailwindcs

然后在ember-cli-build中配置postcss：

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          require('tailwindcss')
        ]
      }
    }
  });

  return app.toTree();
};

然后终于在 app.css:

@tailwind base;

@tailwind components;

@tailwind utilities;

同样，奇怪的是这个有效。

谁能解释为什么这些指令有效？他们是如何粘在一起的？

Answer 1

好的，所有 "magic" 都发生在这里：

https://github.com/jeffjewiss/ember-cli-postcss/blob/58eb75fd351a73c1cea6ea40cfd7425659e6ac44/index.js

基本上，此文件使用 ember-cli 挂钩来自定义构建过程，以便 postcss 使用您指定的插件 (tailwindcs) 预处理您的 CSS 文件。

此文件中的代码还允许进行后处理和过滤，尽管您没有使用这些功能。

指令在构建时由 postcss 解析和执行，纯 CSS 传递到您的浏览器。

你不需要了解这个文件中发生的一切，只需要知道代码就在那里并且是开源的，以备不时之需。

与 parcel 和 webpack 等模块打包器不同，ember-cli 和 broccoli 依赖 JavaScript 代码来完成大部分配置，而不是配置文件。结合约定优于配置，这可以使 ember-cli 感觉像 "magic".

Ember / PostCSS / Tailwind - 在哪里解析指令？

Ember / PostCSS / Tailwind - where do directives get parsed?

ember.js

postcss

tailwind-css