update webpack config for scss

Author: tanhongit

package.json

@@ -39,16 +39,17 @@
     "expose-loader": "^4.1.0",
     "postcss-loader": "^7.0.2",
     "prettier": "^2.8.4",
-    "sass": "^1.42.1",
-    "sass-loader": "^12.1.0",
+    "sass": "^1.59.2",
+    "sass-loader": "^13.2.0",
     "stylelint": "^13.13.1",
     "stylelint-declaration-use-variable": "^1.7.3",
     "stylelint-prettier": "^1.2.0",
     "stylelint-webpack-plugin": "^4.1.0",
     "webpack": "^5.76.1",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
-    "terser-webpack-plugin": "^5.3.7"
+    "terser-webpack-plugin": "^5.3.7",
+    "node-sass": "^8.0.0"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

src/assets/scss/style.scss

@@ -15,6 +15,9 @@ const config = {
                 // CSS
                 './src/assets/css/style.css',
 
+                // SCSS
+                './src/assets/scss/style.scss',
+
                 // JS
                 './src/assets/js/script.js',
             ]
@@ -42,6 +45,15 @@ const config = {
                     },
                 ],
             },
+            {
+                test: /\.(scss|sass)$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    "css-loader",
+                    "postcss-loader",
+                    "sass-loader",
+                ],
+            },
             {
                 test: /\.svg/,
                 type: "asset",