From 4d5aea6c4f9db7139d5347932d4d9ed9a7ff96ba Mon Sep 17 00:00:00 2001
From: ChaotiCryptidz <chaoticryptidz@owo.monster>
Date: Thu, 2 Jun 2022 21:16:35 +0100
Subject: [PATCH] seporate css

---
 package.json      | 1 +
 webpack.config.js | 8 ++++----
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index e7c5382..9625b71 100644
--- a/package.json
+++ b/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",
diff --git a/webpack.config.js b/webpack.config.js
index d52a132..0d4ea59 100644
--- a/webpack.config.js
+++ b/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',