[Delivers #187584859] Setup sample sass styles

atlp-rwanda · Jun 28, 2024 · c0c23c4 · c0c23c4
1 parent 1538634
commit c0c23c4
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
@@ -36,6 +36,7 @@
     "@storybook/react-webpack5": "^8.1.10",
     "@storybook/test": "^8.1.10",
     "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
+    "@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
@@ -5,6 +5,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",
@@ -30,6 +31,14 @@ const config: Configuration = {
           },
         },
       },
+      {
+        test: /\.scss$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "sass-loader"
+        ],
+      },
     ],
   },
   resolve: {
@@ -51,6 +60,9 @@ const config: Configuration = {
       ],
     }),
     new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "[name].[contenthash].css",
+    }),
   ],
 };