0

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

同样，奇怪的是这行得通。

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

4

1 回答 1

3

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

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 感觉像“魔术”。

于 2019-07-15T19:03:29.040 回答