seporate css

package.json

@@ -5,6 +5,7 @@
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
     "html-webpack-plugin": "^5.5.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "node-sass": "^7.0.1",
     "prettier": "^2.6.2",
     "sass-loader": "^13.0.0",

webpack.config.js

@@ -3,6 +3,7 @@ const path = require('path');
 const TerserPlugin = require("terser-webpack-plugin");
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
   mode: "production",
@@ -27,7 +28,8 @@ module.exports = {
         'og:title': { property: 'og:title', content: "Chaos's Food Likes/Dislikes" },
         'og:description': { property: 'og:description', content: "A list for all the foods we like, dislike and find ourselves unable to eat due to sensory difficulties." },
       },
-    })
+    }),
+    new MiniCssExtractPlugin(),
   ],
   devServer: {
     historyApiFallback: true,
@@ -42,9 +44,7 @@ module.exports = {
     rules: [
       {
         test: /\.(scss)$/,
-        use: [{
-          loader: 'style-loader',
-        }, {
+        use: [MiniCssExtractPlugin.loader, {
           loader: 'css-loader',
         }, {
           loader: 'postcss-loader',