具有多個 Webpack 入口點的多個 Tailwind CSS 類

Question

問題陳述

所以我有一個帶有 webpack 和 tailwind CSS 的 React 項目設置。
在我的 webpack 配置中，我有多個入口點，以便為每個入口點生成不同的 CSS 和 JS。
當我在我的 React 組件中使用順風類時，就會出現問題。
假設我僅在 Component1（或入口點 1）中使用順風類bg-red-600 。
因此，通過 webpack 構建文件后， bg-red-600將出現在所有入口點生成的 CSS 文件中（請記住，我只是在第一個入口點組件中使用了這個類）。
它應該做的只是在第一個組件 CSS 文件中有bg-red-600類，而不是在所有 CSS 文件中預設它，即使我沒有在第一個組件以外的任何其他地方使用它。

希望我能夠表達我的觀點。

謝謝。

Webpack 的入口點：

entry: {
    app1: path.resolve(
        __dirname,
        'src/Component1'
    ),
    app2: path.resolve(
        __dirname,
        'src/Component2'
    ),

},

Answer 1

這是我的解決方案：

1. /config文件夾，其中包含每個條目 js 的自定義 tailwind-xxx.config 文件

例如。 /config/tailwind-ConfirmButton.config.js ：

module.exports = {
  content: [
    './src/common/ConfirmButton/ConfirmButton.jsx',
  ],
  // plugins: [require('@tailwindcss/forms')],
}

2. webpack.config.js

const postcssOpts = { postcssOptions: env => {
    // here is the point
    const component = env._module.context.slice(env._module.context.lastIndexOf('/') + 1)

    return { 
      plugins: [
        ['tailwindcss', {
          config: `./config/tailwind-${component}.config.js`,
        }],
        autoprefixer
      ] 
    }
  } 
}

...

entry: {
  confirm: path.resolve(__dirname, './src/widgets/confirmButton.js'),
},
target: ['web', 'es5'], // <=== can be omitted as default is 'web'
output: {
  filename: '[name]/tag.js',
  path: path.resolve(__dirname, 'dist/exp'),
  publicPath: './',
},

...

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    {
      loader: 'postcss-loader',
      options: postcssOpts,
    },
  ],
},

3. 入口小部件 js 例如。 /src/widgets/customButton.js ：

...

render(
  <ConfirmButton
    expId={expId}
    content={content}
    confirmBtn={confirmBtn}
    cancelBtn={cancelBtn}
    field={field}
  />,
  container
)

4. 最后運行weppack --mode=production