Added SASS configuration to webpack

CristianDavidCabrera · May 15, 2019 · de16342 · de16342
1 parent 468fb0c
commit de16342
Show file tree

Hide file tree

Showing 8 changed files with 1,317 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,8 @@
     "css-loader": "^2.1.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.31.0",
     "webpack-cli": "^3.3.2"

diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,3 @@
-import './styles/reset.css'
-import './styles/navbar.css'
-import './styles/index.css'
+import './styles/index.scss'
 
 console.log('Hello World');
diff --git a/src/styles/navbar.css → src/styles/_navbar.scss b/src/styles/navbar.css → src/styles/_navbar.scss
diff --git a/src/styles/reset.css → src/styles/_reset.scss b/src/styles/reset.css → src/styles/_reset.scss
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
diff --git a/src/styles/index.css → src/styles/index.scss b/src/styles/index.css → src/styles/index.scss
@@ -1,3 +1,6 @@
+@import "reset";
+@import "navbar";
+
 * {
     font-family: 'Roboto', Verdana;
 }

diff --git a/webpack.config.js b/webpack.config.js
@@ -11,8 +11,8 @@ module.exports = {
     module:{
         rules:[
             { 
-              test:/\.css$/,
-              use: ['style-loader','css-loader'] 
+              test:/\.scss$/,
+              use: ['style-loader','css-loader','sass-loader'] 
             },
         ],
     },