为什么在构建webpack.mix.js时，我的.css文件不会出现在公共目录中？

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .styles('resources/css/app.css', 'public/css/app.css');

npm install style-loader css-loader --save-dev

npm install mini-css-extract-plugin --save-dev

const mix = require('laravel-mix');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'webpack.mix.js')
   .options({
       postCss: [
           require('tailwindcss'),
       ],
   })
   .webpackConfig({
       plugins: [
           new MiniCssExtractPlugin({
               filename: 'css/app.css',
           }),
       ],
   });