scss / css样式无法通过webpack 4更新

Question

你好，好人！

当我手动将CSS文件的链接标记添加到index.pug文件中时，问题就开始了。我这样做是因为我的javascript在CSS之前加载，这给我的设计带来了很多问题，所以我不得不手动将link标记添加到index.pug中，以便它可以在我的javascript之前加载。

现在的问题是我的css文件没有在样式的任何更改上重新加载/更新。我认为发生这种情况是因为它可能使用了CSS的dist文件夹版本，但是所有内容似乎都指向dist文件夹了吗？无论如何，这是我的index.pug，webpack.dev.js和webpack.prod.js

如何确保CSS正在使用dev CSS或使其更新并正常工作？ 以及如何使CSS文件自动插入到index.pug文件中？

index.pug：

doctype html
html
  head.
    <meta charset="UTF-8">
    <title>Welcome - Cervini Bhatia PC</title>   
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="/images/favicon.png">
 <link rel="stylesheet" type="text/css" href="/main-86f179249c49be039aa1.css"> <-- doesn't update but does load before javascript
  body   
    include ./modules/_loading.pug
    include ./modules/_landing.pug
    include ./modules/_team-section.pug
    include ./modules/_experience.pug
    include ./modules/_firm-overview.pug
    include ./modules/_communication.pug
    include ./layout/_footer.pug

webpack.dev.js：

const path = require("path")
const webpack = require("webpack")
const HTMLWebpackPlugin = require("html-webpack-plugin")
// const cssDev = ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'];

module.exports = {
  entry: {
    main: [
           "webpack-hot-middleware/client?reload=true",
           "./src/script/main.js"
          ]
  },
  mode: "development",
  output: {
    filename: "[name]-bundle.js",
    path: path.resolve(__dirname, "../dist"),
    publicPath: "/"
  },
  devServer: {
    contentBase: "dist",
    overlay: true,
    stats: {
      colors: true
    }
  },
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader?sourceMap', 'css-loader?sourceMap', 'sass-loader?sourceMap']
      },
      {
        test: /\.(jpeg|jpg|png|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[name].[ext]"
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /\.pug$/,
        use: [
          {
            loader: "pug-loader"
          }
        ]
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development")
      }
    }),
    new HTMLWebpackPlugin({
      template: "./src/pug/index.pug",
      title: "Cervini Bhatia PC",
      inject: true
    })
  ]
}

webpack.prod.js：

const path = require("path")
const webpack = require("webpack")
const HTMLWebpackPlugin = require("html-webpack-plugin")
const MiniCssExtractPluigin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const UglyifyJsPlugin = require("uglifyjs-webpack-plugin");
const isProd = process.env.NODE_ENV === "production";
const CompressionPlugin = require("compression-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");

module.exports = env => {
  return {
    entry: {
      // vendor: [
      //   "gsap"
      // ],
      main: ["./src/script/main.js"]
    },
    mode: "production",
    output: {
      filename: "[name]-bundle.js",
      path: path.resolve(__dirname, "../dist"),
      publicPath: "/"
    },
    module: {
      rules: [{
          test: /\.js$/,
          exclude: /node_modules/,
          use: [{
            loader: "babel-loader"
          }]
        },
        {
          test: /\.css$/,
          use: [{
              loader: MiniCssExtractPluigin.loader
            },
            {
              loader: "css-loader"
            }
          ]
        },
        {
          test: /\.scss$/,
          use: [MiniCssExtractPluigin.loader, 'css-loader?sourceMap', 'sass-loader?sourceMap']
        },
        {
          test: /\.(gif|svg|jpeg|jpg|png)$/,
          use: [{
            loader: "file-loader",
            options: {
              name: "images/[name]-[hash:8].[ext]"
            }
          }]
        },
        {
          test: /\.html$/,
          use: [{
            loader: "html-loader"
          }]
        },
        {
          test: /\.pug$/,
          use: [{
            loader: "pug-loader"
          }]
        }
      ]
    },
    plugins: [
      new OptimizeCssAssetsPlugin(),
      new MiniCssExtractPluigin({
        "filename": "[name]-[contenthash].css"
      }),
      new HTMLWebpackPlugin({
        template: "./src/pug/index.pug",
        title: "Links Journal"
      }),
      new webpack.DefinePlugin({
        'process.env':{
          'NODE_ENV': JSON.stringify(env.NODE_ENV)
        }
      }),
      // new MinifyPlugin(),
      new UglyifyJsPlugin(),
      new CompressionPlugin({
        algorithm: "gzip"
      }),
      new BrotliPlugin()
    ]
  }
}

谢谢。非常感谢您的帮助！