add sass loader

package-lock.json

@@ -10855,6 +10855,25 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "sass": {
+      "version": "1.32.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.32.8.tgz",
+      "integrity": "sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-11.0.1.tgz",
+      "integrity": "sha512-Vp1LcP4slTsTNLEiDkTcm8zGN/XYYrZz2BZybQbliWA8eXveqA/AxsEjllQTpJbg2MzCsx/qNO48sHdZtOaxTw==",
+      "dev": true,
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

package.json

@@ -34,6 +34,8 @@
     "postcss-nesting": "^7.0.1",
     "postcss-preset-env": "^6.7.0",
     "postcss-simple-vars": "^6.0.2",
+    "sass": "^1.32.8",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "stylelint": "^13.8.0",
     "stylelint-config-recommended": "^3.0.0",

src/js/index.js

@@ -1,4 +1,4 @@
-// import '../sass/main.scss';
+import '../sass/main.scss';
 import '../css/mixins.postcss.css';
 import '../css/style.css';
 

src/sass/main.scss

@@ -1,2 +1,2 @@
-@import 'breakpoints';
-@import 'mixins';
+@import 'breakpoints.scss';
+@import 'mixins.scss';

webpack.config.js

@@ -88,6 +88,11 @@ module.exports = (env) => ({
         exclude: /\.inline\.css$/i,
         use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
       },
+      {
+        test: /\.scss$/i,
+        include: path.resolve(__dirname, 'src/sass'),
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
+      },
       {
         test: /.(png|svg|jpg|jpeg|gif)$/i,
         include: path.resolve(__dirname, 'src'),