css and sass loader added

Author: udaypydi

config/webpack.dev.config.js

@@ -1,5 +1,6 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const paths = require('./paths');
 
 module.exports = {
@@ -19,6 +20,18 @@ module.exports = {
                 test: /(.js|.jsx)/,
                 exclude: /(node_modules|bower_components)/,
                 use: 'babel-loader',
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                  'style-loader',
+                  'css-loader',
+                  'sass-loader',
+                ],
+            },
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
             }
         ]
     },
@@ -28,7 +41,14 @@ module.exports = {
             hash: true,
             title: 'Boilerplate',
         }),
+        new MiniCssExtractPlugin({
+            filename: '[name].css',
+            chunkFilename: '[id].css'
+        })
     ],
+    resolve: {
+        extensions: ['.js', 'jsx', '.scss', '.css']
+    },
     devServer: {
         contentBase: paths.output,
         port: 9000,

config/webpack.prod.config.js

@@ -1,5 +1,6 @@
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const paths = require('./paths');
 
@@ -19,6 +20,18 @@ module.exports = {
                 test: /(.js|.jsx)/,
                 exclude: /(node_modules|bower_components)/,
                 use: 'babel-loader',
+            },
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                  'style-loader',
+                  'css-loader',
+                  'sass-loader',
+                ],
+            },
+            {
+                test: /\.css$/i,
+                use: ['style-loader', 'css-loader'],
             }
         ]
     },
@@ -33,5 +46,12 @@ module.exports = {
             analyzerMode: 'static',
             defaultSizes: 'gzip'
         }),
-    ]
+        new MiniCssExtractPlugin({
+            filename: '[name].[hash].css',
+            chunkFilename: '[id].[hash].css'
+        })
+    ],
+    resolve: {
+        extensions: ['.js', 'jsx', '.scss', '.css']
+    },
 }

package.json

@@ -35,6 +35,7 @@
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.2",
     "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.5.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.2",
@@ -43,6 +44,10 @@
     "eslint-plugin-react-hooks": "^2.5.1",
     "html-webpack-plugin": "^4.0.4",
     "jest": "^25.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3",
     "webpack-bundle-analyzer": "^3.6.1",
     "webpack-dev-server": "^3.10.3"
   }

src/app.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
+import './app.scss';
 
 export default function App() {
   return (
-    <div>Welcome to React Boilerplate!</div>
+    <div className="App--Container">Welcome to React Boilerplate!</div>
   );
 }

src/app.scss

@@ -0,0 +1,9 @@
+$bg-color: grey;
+$txt-color: white;
+
+.App--Container {
+    display: flex;
+    flex: 1;
+    background: $bg-color;
+    color: $txt-color;
+}