Javascript 网页包SASS和Tailwind不生成CSS文件

我想将

sass

和

tailwind

添加到我的项目中，但由于某些原因，我不知道，当我运行webpack时没有生成CSS文件，或者它生成了CSS文件，但我找不到它

这是我的webpack.config.js：

 const path = require("path");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");

 module.exports = {
   entry: {
     index: './src/index.js',
     page2: './src/page2.js'
 },
 output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
 },

 module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },                    
                {
                    loader: 'postcss-loader'                        
                },                    
                {
                    loader: 'sass-loader',
                    options: {                            
                        plugins: () => [autoprefixer()]
                    }
                } 
            ]
        },
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
        },
        {
            test: /\.js$/i,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
        },
        {
            // Extract any CSS content and minimize
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },
                { loader: 'postcss-loader' }
            ]
        }  
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: './dist/index.html',
        inject: 'body',
        chunks: ['index'],
         filename: 'index.html'
      }),
      new HtmlWebpackPlugin({
        template: './dist/page2.html',
        inject: 'body',
        chunks: ['page2'],
        filename: 'page2.html'
      }),
      new MiniCssExtractPlugin({
        filename: "styles.css",
        chunkFilename: "[id].[contenthash].css"
       })
   ],
   devServer: {
       watchContentBase: true,
       contentBase: path.resolve(__dirname, 'dist'),
       open: true
   }
};

module.exports = {
   plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-preset-env')({ stage: 1 }),
    require('autoprefixer')
  ]
};

我的postss.config.js：

 const path = require("path");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");

 module.exports = {
   entry: {
     index: './src/index.js',
     page2: './src/page2.js'
 },
 output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
 },

 module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },                    
                {
                    loader: 'postcss-loader'                        
                },                    
                {
                    loader: 'sass-loader',
                    options: {                            
                        plugins: () => [autoprefixer()]
                    }
                } 
            ]
        },
        {
            test: /\.(png|jpg|gif|svg|eot|ttf|woff)$/,
            use: [
              {
                loader: 'file-loader',
              },
            ],
        },
        {
            test: /\.js$/i,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
              },
            },
        },
        {
            // Extract any CSS content and minimize
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                { loader: 'css-loader', options: { importLoaders: 1 } },
                { loader: 'postcss-loader' }
            ]
        }  
      ]
   },
   plugins: [
      new HtmlWebpackPlugin({
        template: './dist/index.html',
        inject: 'body',
        chunks: ['index'],
         filename: 'index.html'
      }),
      new HtmlWebpackPlugin({
        template: './dist/page2.html',
        inject: 'body',
        chunks: ['page2'],
        filename: 'page2.html'
      }),
      new MiniCssExtractPlugin({
        filename: "styles.css",
        chunkFilename: "[id].[contenthash].css"
       })
   ],
   devServer: {
       watchContentBase: true,
       contentBase: path.resolve(__dirname, 'dist'),
       open: true
   }
};

module.exports = {
   plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-preset-env')({ stage: 1 }),
    require('autoprefixer')
  ]
};

还有我的tailwind.config.js

module.exports = {
  purge: [  ],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

my index.js：

import "./styles.scss";

my styles.scss：

@import "~tailwindcss/base.css";
@import "~tailwindcss/components.css";
@import "~tailwindcss/utilities.css";

.my-class {
   @apply font-bold;
}

这不管用…有人能帮我吗