add css

package.json

@@ -10,8 +10,12 @@
     "build": "webpack"
   },
   "devDependencies": {
-    "date-fns": "^2.0.0-alpha.16",
-    "webpack": "^4.19.0",
-    "webpack-cli": "^3.1.0"
+    "autoprefixer": "^10.2.6",
+    "postcss": "^8.3.0",
+    "postcss-loader": "^5.3.0",
+    "sass": "^1.34.0",
+    "sass-loader": "^11.1.1",
+    "webpack": "^5.38.1",
+    "webpack-cli": "^4.7.0"
   }
 }

postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [["postcss-preset-env"], require("autoprefixer")],
+};

webpack.config.js

@@ -1,14 +1,23 @@
-'use strict';
+"use strict";
 
-const path = require('path');
+const path = require("path");
 
 module.exports = {
-    entry: {
-        bundle: path.join(__dirname, 'index.js'),
-    },
-    mode: 'production',
-    output: {
-        filename: '[name].[hash].js',
-        path: path.join(__dirname, 'dist'),
-    },
+  entry: {
+    main: path.join(__dirname, "index.js"),
+    styles: path.join(__dirname, "styles.scss"),
+  },
+  mode: "production",
+  module: {
+    rules: [
+      {
+        test: /\.s[ac]ss$/i,
+        use: ["style-loader", "css-loader", "postcss-loader", "sass-loader"],
+      },
+    ],
+  },
+  output: {
+    filename: "[name].[hash].js",
+    path: path.join(__dirname, "dist"),
+  },
 };