From bc8fa72fa6cd408b4d0392758f84df0ea1ba2e64 Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Sat, 27 Feb 2021 18:54:22 +0000
Subject: [PATCH] add sass loader

---
 package-lock.json  | 19 +++++++++++++++++++
 package.json       |  2 ++
 src/js/index.js    |  2 +-
 src/sass/main.scss |  4 ++--
 webpack.config.js  |  5 +++++
 5 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 722ad41..67810a1 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 44f0041..62c341e 100644
--- a/package.json
+++ b/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",
diff --git a/src/js/index.js b/src/js/index.js
index 5ebc074..ff1755d 100644
--- a/src/js/index.js
+++ b/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';
 
diff --git a/src/sass/main.scss b/src/sass/main.scss
index ab49132..34bb7c0 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,2 +1,2 @@
-@import 'breakpoints';
-@import 'mixins';
+@import 'breakpoints.scss';
+@import 'mixins.scss';
diff --git a/webpack.config.js b/webpack.config.js
index 596fedf..a11c842 100644
--- a/webpack.config.js
+++ b/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'),