From bc8fa72fa6cd408b4d0392758f84df0ea1ba2e64 Mon Sep 17 00:00:00 2001 From: ray 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'),