[Delivers #187584859] Setup sample sass styles

atlp-rwanda · Jul 1, 2024 · 013268b · 013268b
1 parent 3162e08
commit 013268b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.14.9",
+    "@types/mini-css-extract-plugin": "^2.5.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/webpack-dev-server": "^4.7.2",

diff --git a/webpack.prod.config.ts b/webpack.prod.config.ts
@@ -6,6 +6,7 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
+import MiniCssExtractPlugin from "mini-css-extract-plugin";
 
 const config: Configuration = {
   mode: 'production',
@@ -31,6 +32,14 @@ const config: Configuration = {
           },
         },
       },
+      {
+        test: /\.scss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "sass-loader"
+        ],
+      },
     ],
   },
   resolve: {
@@ -52,6 +61,9 @@ const config: Configuration = {
       ],
     }),
     new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css",
+    }),
   ],
 };