try add global css

ajaxsys · ajaxsys · commit 583c416f8e78 · 2024-08-20T18:00:45.000+09:00
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -27,6 +27,8 @@
     "webpack-node-externals": "^3.0.0"
   },
   "devDependencies": {
-    "@babel/node": "^7.25.0"
+    "@babel/node": "^7.25.0",
+    "css-loader": "^7.1.2",
+    "style-loader": "^4.0.0"
   }
 }
diff --git a/server.js b/server.js
@@ -38,6 +38,7 @@ app.get('*', async (req, res) => {
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="/styles.css"> <!-- 引入样式表 -->
         <title>React SSR</title>
     </head>
     <body>
diff --git a/src/App.js b/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { Routes, Route, Link } from 'react-router-dom';
 import Home from './Home';
 import Blog from './Blog';
+import './styles.css'; // 导入 CSS 文件
 
 function App({serverData}) {
   return (
diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,28 @@
+/* src/styles.css */
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f4f4f4;
+  margin: 0;
+  padding: 20px;
+}
+
+h1 {
+  color: #333;
+}
+
+p {
+  color: #666;
+}
+
+button {
+  padding: 10px 20px;
+  background-color: #007bff;
+  border: none;
+  border-radius: 5px;
+  color: white;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -18,7 +18,11 @@ module.exports = {
             presets: ['@babel/preset-env', '@babel/preset-react']
           }
         }
-      }
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
     ]
   },
   mode: 'development'

Original file line number	Diff line number	Diff line change
`@@ -27,6 +27,8 @@`
`27`	`27`	`"webpack-node-externals": "^3.0.0"`
`28`	`28`	`},`
`29`	`29`	`"devDependencies": {`
`30`		`- "@babel/node": "^7.25.0"`
	`30`	`+ "@babel/node": "^7.25.0",`
	`31`	`+ "css-loader": "^7.1.2",`
	`32`	`+ "style-loader": "^4.0.0"`
`31`	`33`	`}`
`32`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,11 @@ module.exports = {`
`18`	`18`	`presets: ['@babel/preset-env', '@babel/preset-react']`
`19`	`19`	`}`
`20`	`20`	`}`
`21`		`- }`
	`21`	`+ },`
	`22`	`+ {`
	`23`	`+ test: /\.css$/,`
	`24`	`+ use: ['style-loader', 'css-loader'],`
	`25`	`+ },`
`22`	`26`	`]`
`23`	`27`	`},`
`24`	`28`	`mode: 'development'`