Webpack 未创建 CSS 文件，style-loader、css-loader、sass-loader 存在问题

Question

首先要说的是，一切都正常，但不知怎的就坏了。

我正在尝试获取独立的 css 文件并将它们包含在我的 index.html 文件中

但是 css 仍然在 main.bundle.js 中内联加载，但页面中缺少 css。 我注意到在 main.bundle.js 中我看到了很多“ ”

padding-right: 15px;\n}\n.btn.content-btn::before {\n  position: absolute;\n  

我知道这个 webpack 文件很乱，但我几个小时以来一直在尝试不同的变体。

我是 wepback 的新手，所以我希望得到一些帮助。 我使用的是 webpack 5.68.0

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const Dotenv = require('dotenv-webpack');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// css twice [CONTENTS]
module.exports = {
  mode: 'development',
    //devtool: 'inline-module-source-map',
  devtool: 'source-map',
    entry: [
        './src/index.js'
    ],
    output: {
        // path: __dirname + '/dist',
        path: __dirname + '/public',
        publicPath: '/',
    filename: '[name].bundle.js',
    },
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'async',
      minSize: 60000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      cacheGroups: {
        // styles: {
        //   name: 'styles',
        //   test: /\.s?css$/,
        //   chunks: 'all',
        //   minChunks: 1,
        //   reuseExistingChunk: true,
        //   enforce: true,
        // },
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'initial',
          enforce: true
        },
        vendorModules: {
          test: /src\/js\/modules/,
          name: 'vendor-modules',
          chunks: 'initial',
          enforce: true
        }
      }
    }
  },
    module: {
        rules: [
            {
                enforce: 'pre',
        test: /\.js$/,
                exclude: /node_modules/,
                // use: [
        //   'babel-loader',
        //   'eslint-loader',
        // ]
        use: [
          {
            loader: 'babel-loader',
          },
          // {
          //   loader: 'eslint-webpack-plugin',
          //   options: {
          //     quiet: true
          //   }
          // }
        ]
      },
      {
        test: /\.ts$/,
        use: ['babel-loader']
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
          // {
          //   loader: MiniCssExtractPlugin.loader,
          //   options: {
          //     publicPath: __dirname + '/public',
          //   },
          // },
          // {
          //   loader: 'css-loader',
          //   options: {
          //     importLoaders: 2,
          //     sourceMap: true
          //   }
          // },
          // {
          //   loader: "sass-loader",
          //   options: {
          //     sourceMap: true,
          //     sassOptions: {
          //       indentWidth: 2,
          //       includePaths: ["src/styles"],
          //     },
          //   },
          // },
        ],
      },
      // {
      //   test: /\.s[ac]ss$/i,
      //   //test: /\.scss$/,
      //   //test: /\.s[ac]ss$/i,
      //   exclude: /node_modules/,
      //   use: [
      //     {
      //       loader: 'file-loader',
      //       options: { outputPath: 'css/', name: '[name].min.css'}
      //     },
      //     'style-loader',
      //     {
      //       loader: "sass-loader"
      //     }
      //   ]
      // },
      // {
      //   test: /\.s[ac]ss$/i,
      //   use: [
      //     // something is making styles show up twice.     I don't want style loader loads twice???
      //     "style-loader", // Creates `style` nodes from JS strings
      //     "css-loader",      // Translates CSS into CommonJS
      //     {
      //       loader: 'sass-loader',
      //       options: {
      //         sourceMap: true
      //       }
      //     },          // Compiles Sass to CSS
      //   ],
      // },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
      // {
      //   test: /\.svg$/,
      //   use: [
      //     {
      //       loader: 'svg-url-loader',
      //       options: {
      //         limit: 10000,
      //       },
      //     },
      //   ],
      // },
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', ".ts"],
    fallback: {
      "fs": false,
      "os": false,
      "tls": false,
      "net": false,
      "path": false,
      "zlib": false,
      "http": false,
      "https": false,
      "browser": false,
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer"),
      "crypto": false,
      "crypto-browserify": require.resolve('crypto-browserify'), //if you want to use this module also don't forget npm i crypto-browserify
    }
    },

  devServer: {
    allowedHosts: [
      'learntoearn.dev',
    ],
    historyApiFallback: true,
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 8080,
  },
    plugins: [
    new MiniCssExtractPlugin( // split css into files
      {
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: "[name].css",
        chunkFilename: "[id].css"
      }
    ),
    //new BundleAnalyzerPlugin(),
    new ESLintPlugin(),
    new Dotenv(),
    new ESLintPlugin({
      quiet: true,
    }),
    new webpack.ProvidePlugin({
      process: 'process/browser',
    }),
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
        new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      template: __dirname + '/public/index.html',
      // template: __dirname + '/src/index.html',
      filename: 'index.html',
      inject: false // BROKE AGAIN FOR SOME REASON, SO SETTING TO TRUE
      //inject: 'body' // causing styles to be loaded twice!
    })
    ]
};

Answer 1

对于遇到此问题的任何人，我都有几个问题。

删除节点模块。

清除yarn/npm缓存。

重新安装所有内容。

在您的 webback 文件中包含此内容

      {
        //test: /\.s[ac]ss$/i,
        test: /\.(s(a|c)ss)$/,
        use: [
          // Creates `style` nodes from JS strings
          MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },

在插件中，你只需要这个

    plugins: [
    new MiniCssExtractPlugin(), // split css into files

Webpack 然后创建一个 main.css 文件并将其包含在 index.html 中

Answer 2

我可以自信地说。我用我的 webpack 构建进行了测试。如果您在 css 加载器使用属性中包含“style-loader”。 MiniCssExtractPlugin 不起作用。这意味着，在 webpack 构建之后你将不会获得 css 文件。如果你删除“style-loader”它将起作用。