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

Posted 2023-03-07

【中文标题】Ember / PostCSS / Tailwind - 在哪里解析指令？

【英文标题】：Ember / PostCSS / Tailwind - where do directives get parsed?

【发布时间】：2019-11-22 14:36:36

【问题描述】：

我已经组装了一个 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;

再一次，奇怪的是这作品。

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

【参考方案1】：

好的，所有的“魔法”都在这里发生：

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 感觉像“神奇”。

【讨论】：

太棒了-谢谢！我认为我未能理解的另一件事是指令（即@tailwind components;）是由tailwind编写的，具有被postcss使用的明确意图。