Question

我已经组合了余烬，postcss和顺风的原始组合，对于我的一生，我不明白为什么此代码有效。

对于具有postcss和顺风的通用余烬应用程序：

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

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

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

基本上，该文件使用ember-cli挂钩自定义构建过程，以便使用指定的插件（tailwindcs）对CSS文件进行后期处理。

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

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

您不需要了解该文件中正在发生的一切，只需知道代码已经存在并且是开源的即可。

不同于包裹和webpack等模块捆绑器，ember-cli和西兰花依赖于JavaScript代码来执行大多数配置，而不是配置文件。结合约定而不是配置，这可以使ember-cli感觉像“魔术”。

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

1 个答案: