feat(webpack-react): load CSS using Webpack

webpack-react/.gitignore

@@ -1,5 +1,4 @@
 # Others
-package-lock.json
 build*
 
 # Logs

webpack-react/README.md

@@ -12,3 +12,6 @@
 * [Production](https://webpack.js.org/guides/production/)
 * [Setup Development and Production Environment for React App](https://medium.com/freestoneinfotech/setup-development-and-production-environment-for-react-app-397c4cc9e382)
 * [HtmlWebpackPlugin](https://webpack.js.org/plugins/html-webpack-plugin/)
+* [load CSS](https://masteringjs.io/tutorials/webpack/css-loader)
+* [load CSS](https://webpack.js.org/loaders/css-loader/)
+* [load CSS](https://blog.jakoblind.no/css-modules-webpack/)

webpack-react/app/app.jsx

@@ -3,7 +3,7 @@ import Home from './pages/home';
 export default function App() {
   return (
     <div>
-	<h1>Auth0 with React.js</h1>
+	<h1>React.js</h1>
 	<Home />
     </div>
   )

webpack-react/app/pages/home.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import Hello from '../components/hello';
-
+import '../style.css';
 const Home = () => {
     return (
 	<>
-	    <h1>Home</h1>
+	    <h2>Home</h2>
-	    <h2>(React.js Lambda Function Component)</h2>
+	    <h3>(React.js Lambda Function Component)</h3>
 	    <Hello msg="Hello World!" />
 	</>
     );

webpack-react/app/style.css

@@ -0,0 +1,3 @@
+h1 { color: red; }
+h2 { color: green; }
+h3 { color: blue; }

webpack-react/config/webpack.common.js

@@ -20,7 +20,12 @@ module.exports = {
 		exclude: /node_modules/,
 		include: path.resolve(__dirname, '../app'),
 		use: ['babel-loader'],
-	    }
+	    },
+	    {
+		//test all *.css using style-loader and css-loader
+		test: /\.css$/i,
+		use: ["style-loader", "css-loader"],
+	    },
 	]
     },
     resolve: {

webpack-react/package.json

@@ -14,7 +14,7 @@
         "node": ">=10"
     },
     "scripts": {
-        "start": "webpack serve --open --config config/webpack.dev.js",
+        "start": "webpack serve --config config/webpack.dev.js",
         "build": "webpack --config config/webpack.prod.js"
     },
     "devDependencies": {
@@ -22,7 +22,9 @@
         "@babel/preset-env": "7.18.9",
         "@babel/preset-react": "7.18.6",
         "babel-loader": "8.2.5",
+        "css-loader": "6.7.1",
         "html-webpack-plugin": "5.5.0",
+        "style-loader": "3.3.1",
         "webpack": "5.73.0",
         "webpack-cli": "4.10.0",
         "webpack-dev-server": "4.9.3",