css - 生成された CSS コードを Tailwind から分割する方法は?

Question

Tailwind PostCSS プラグイン (purgecss プラグインと組み合わせて) によって生成された大きな CSS ファイルを複数の CSS ファイル (コンシューマー JS ファイルごとに 1 つの CSS ファイル) に分割するソリューションを探しています。JS ファイルで使用されている CSS ルールは、JS ファイルで使用されているセレクター (つまり、p-1 や m-1 などのクラス名) を調べることで検出できます。

これまたは同様のものを達成する方法はありますか？

Answer 1

私はこれを部分的に解決することができました。

まず、 からすべての追い風コードを削除しますpostcss.config.js。次にtailwind.config.js、Tailwind クラスを使用しているファイルを含むフォルダーに作成します。

これが私の基本的なデモの例です。

フォルダーには、次の 2 つのファイルがあります。

App.vue
tailwind.config.js

App.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}

私がまだ持っている問題：

• 複数のファイル (1 つのページに動的にロードされる) が同じクラスを使用する場合、css コードが繰り返されます。
• 複数の構成ファイルと、フォルダーごとに 1 つの構成ファイルのみが必要です。
• main の構成ファイルに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: []
};