css - 如何从 Tailwind 拆分生成的 CSS 代码？

Question

我正在寻找一种解决方案，将 Tailwind PostCSS 插件(与 purgecss 插件结合)生成的大 CSS 文件拆分为多个 CSS 文件(每个消费者 JS 文件一个 CSS 文件)。 JS 文件使用的 CSS 规则可以通过查看 JS 文件中使用的选择器(即类名，如 p-1 和 m-1)来检测。

知道如何实现这个或类似的东西吗？

Answer 1

我部分能够解决这个问题。

首先，删除 postcss.config.js 中的所有顺风代码.然后创建tailwind.config.js在包含文件的文件夹中，即使用顺风类。

这是我的基本演示示例。

文件夹中有两个文件:

App.vue
tailwind.config.js

应用程序.vue:

<template>
  <div
    id="app"
    class="flex flex-col flex-no-wrap items-center content-center justify-center"
  >
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "I'm from vue file"
    };
  }
};
</script>

<style lang="scss">
@import "scss/dynamic/tailwind.scss";

#app {
  color: $red;
}
</style>

scss/dynamic/tailwind.scss(可以轻松访问任何文件中的 tailwind):

@tailwind components;
@tailwind utilities;

tailwind.config.js:

module.exports = {
  purge: {
    mode: "all",
    content: [__dirname + "/App.vue"]
  },
  theme: {},
  variants: {},
  plugins: []
};

webpack.config.js(仅 css 部分):

...
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    {
      loader: "postcss-loader",
      options: {
        plugins: env => {
          const dir = env._module.context;
          const config = dir + "/tailwind.config.js";

          return fs.existsSync(config)
            ? [require("tailwindcss")(config)]
            : [];
        }
      }
    },
    {
      loader: "sass-loader",
      options: {
        data: `@import "scss/static/abstracts";`
      }
    }
  ]
}
...

最后，我有一个动态加载的 css 文件，如下所示:

.flex{display:flex}.flex-col{flex-direction:column}.flex-no-wrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-center{justify-content:center}.content-center{align-content:center}#app{color:red}

问题，我仍然有:

如果多个文件(在一个页面上动态加载)使用相同的类，css 代码会重复

我需要有多个配置文件 + 每个文件夹只有一个配置文件。

主要配置文件 app.scss在 .blade.php 中看不到类文件，可能跟文件路径有关:

const path = require("path");

module.exports = {
  purge: [
    path.resolve("../../../../views/base.blade.php"),
    path.resolve("../../../../views/page/home.blade.php")
  ],
  theme: {},
  variants: {},
  plugins: []
};