feat(webpack-react): load CSS using Webpack
This commit is contained in:
parent
f8cae83a95
commit
0db548d0b7
|
@ -1,5 +1,4 @@
|
|||
# Others
|
||||
package-lock.json
|
||||
build*
|
||||
|
||||
# Logs
|
||||
|
|
|
@ -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/)
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
import React from 'react';
|
||||
import Hello from '../components/hello';
|
||||
|
||||
import '../style.css';
|
||||
const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<h1>Home</h1>
|
||||
<h2>(React.js Lambda Function Component)</h2>
|
||||
<h2>Home</h2>
|
||||
<h3>(React.js Lambda Function Component)</h3>
|
||||
<Hello msg="Hello World!" />
|
||||
</>
|
||||
);
|
||||
|
|
|
@ -0,0 +1,3 @@
|
|||
h1 { color: red; }
|
||||
h2 { color: green; }
|
||||
h3 { color: blue; }
|
|
@ -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: {
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||
|
|
Loading…
Reference in New Issue