added bundle support for scss, css and imports

Ruth-ikegah · Oct 3, 2022 · 60c7156 · 60c7156
1 parent 352d62c
commit 60c7156
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,8 +43,11 @@
     "lint-staged": "13.0.3",
     "nodemon": "^2.0.20",
     "prettier": "2.7.1",
+    "sass": "1.55.0",
+    "sass-loader": "13.0.2",
     "style-loader": "^3.3.1",
     "stylelint": "14.12.1",
+    "url-loader": "4.1.1",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"

diff --git a/webpack.config.js b/webpack.config.js
@@ -16,17 +16,21 @@ module.exports = {
         use: "babel-loader",
       },
       {
-        test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        test: /\.(c|sa|sc)ss$/,
+        use: ['style-loader','css-loader', 'sass-loader']
       },
       {
-        test: /\.(png|jp(e*)g|svg|gif)$/,
+        test: /\.(png|jp(e*)g|svg|gif|ttf|woff(2)?|eot)(\?v=\d+\.\d+\.\d+)?$/,
         use: ["file-loader"],
       },
       {
         test: /\.svg$/,
         use: ["@svgr/webpack"],
       },
+      {
+        test: /\.(png|gif|woff|woff2|eot|ttf|svg)$/,
+        loader: 'url-loader',
+      }
     ],
   },
   plugins: [