css4、post-css support

rexhang · Apr 10, 2020 · ca7609f · ca7609f
1 parent cf6fabd
commit ca7609f
Show file tree

Hide file tree

Showing 17 changed files with 858 additions and 482 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,17 @@
 {
-	"presets": ["@babel/preset-env", "@babel/preset-react"],
+	"presets": [
+		"@babel/preset-env",
+		"@babel/preset-react"
+	],
 	"plugins": [
 		"react-hot-loader/babel",
-		["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
+		[
+			"import",
+			{
+				"libraryName": "antd",
+				"libraryDirectory": "es",
+				"style": "css"
+			}
+		]
 	]
 }
diff --git a/package.json b/package.json
@@ -1,56 +1,65 @@
 {
-  "name": "create-react-project",
-  "version": "1.0.0",
-  "description": "webpack工程化的react",
-  "main": "index.js",
-  "scripts": {
-    "start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack/webpack.dev.js",
-    "build": "cross-env NODE_ENV=production webpack --mode=production --config webpack/webpack.prod.js",
-    "preview": "serve ./dist"
-  },
-  "author": "rexhang",
-  "license": "ISC",
-  "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/preset-react": "^7.9.4",
-    "@hot-loader/react-dom": "^16.13.0",
-    "@types/react": "^16.9.33",
-    "@types/react-dom": "^16.9.6",
-    "antd": "^4.1.1",
-    "antd-dayjs-webpack-plugin": "^1.0.0",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-import": "^1.13.0",
-    "babel-polyfill": "^6.26.0",
-    "chalk": "^4.0.0",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^5.1.1",
-    "cross-env": "^7.0.2",
-    "css-loader": "^3.4.2",
-    "file-loader": "^6.0.0",
-    "html-webpack-plugin": "^4.0.4",
-    "image-webpack-loader": "^6.0.0",
-    "ip": "^1.1.5",
-    "jquery": "^3.4.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "moment": "^2.24.0",
-    "node-sass": "^4.13.1",
-    "opn": "^6.0.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "progress-bar-webpack-plugin": "^2.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-hot-loader": "^4.12.20",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3",
-    "svg-inline-loader": "^0.8.2",
-    "ts-loader": "^6.2.2",
-    "typescript": "^3.8.3",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "url-loader": "^4.0.0",
-    "webpack": "^4.42.1",
-    "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3",
-    "webpack-merge": "^4.2.2"
-  }
+	"name": "create-react-project",
+	"version": "1.0.0",
+	"description": "webpack工程化的react",
+	"main": "index.js",
+	"scripts": {
+		"start": "cross-env NODE_ENV=development webpack-dev-server --mode=development --config webpack/webpack.dev.js",
+		"build": "cross-env NODE_ENV=production webpack --mode=production --config webpack/webpack.prod.js",
+		"preview": "serve -l 2334 ./dist"
+	},
+	"author": "rexhang",
+	"license": "ISC",
+	"browserslist": [
+		"> 1%",
+		"last 2 versions",
+		"not ie <= 8"
+	],
+	"dependencies": {
+		"@babel/core": "^7.9.0",
+		"@babel/preset-env": "^7.9.0",
+		"@babel/preset-react": "^7.9.4",
+		"@hot-loader/react-dom": "^16.13.0",
+		"@types/react": "^16.9.33",
+		"@types/react-dom": "^16.9.6",
+		"antd": "^4.1.1",
+		"antd-dayjs-webpack-plugin": "^1.0.0",
+		"autoprefixer": "^9.7.6",
+		"babel-loader": "^8.1.0",
+		"babel-plugin-import": "^1.13.0",
+		"babel-polyfill": "^6.26.0",
+		"chalk": "^4.0.0",
+		"clean-webpack-plugin": "^3.0.0",
+		"copy-webpack-plugin": "^5.1.1",
+		"cross-env": "^7.0.2",
+		"css-loader": "^3.4.2",
+		"file-loader": "^6.0.0",
+		"html-webpack-plugin": "^4.0.4",
+		"image-webpack-loader": "^6.0.0",
+		"ip": "^1.1.5",
+		"jquery": "^3.4.1",
+		"mini-css-extract-plugin": "^0.9.0",
+		"moment": "^2.24.0",
+		"node-sass": "^4.13.1",
+		"opn": "^6.0.0",
+		"optimize-css-assets-webpack-plugin": "^5.0.3",
+		"postcss": "^7.0.27",
+		"postcss-loader": "^3.0.0",
+		"postcss-preset-env": "^6.7.0",
+		"progress-bar-webpack-plugin": "^2.1.0",
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1",
+		"react-hot-loader": "^4.12.20",
+		"sass-loader": "^8.0.2",
+		"style-loader": "^1.1.3",
+		"svg-inline-loader": "^0.8.2",
+		"ts-loader": "^6.2.2",
+		"typescript": "^3.8.3",
+		"uglifyjs-webpack-plugin": "^1.3.0",
+		"url-loader": "^4.0.0",
+		"webpack": "^4.42.1",
+		"webpack-cli": "^3.3.11",
+		"webpack-dev-server": "^3.10.3",
+		"webpack-merge": "^4.2.2"
+	}
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		"autoprefixer": {},
+		"postcss-preset-env": {}
+	}
+}
diff --git a/src/App.scss b/src/App.scss
@@ -3,60 +3,63 @@
 $rexLogoSize: 32px;
 
 .App {
-  text-align: center;
+	text-align: center;
 }
-.App-logo{
-  position: relative;
-  width: 520px;
-  height: 520px;
-  .App-logo-react {
-    width: 520px;
-    height: 520px;
-    pointer-events: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-  }
-  .App-logo-rex{
-    @extend .App-logo-react;
-    border-radius: 50%;
-    width: $rexLogoSize;
-    height: $rexLogoSize;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    margin-left: -$rexLogoSize / 2;
-    margin-top: -$rexLogoSize / 2;
-    animation: auto !important;
-  }
+
+.App-logo {
+	position: relative;
+	width: 520px;
+	height: 520px;
+
+	.App-logo-react {
+		width: 520px;
+		height: 520px;
+		pointer-events: none;
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
+	.App-logo-rex {
+		@extend .App-logo-react;
+		border-radius: 50%;
+		width: $rexLogoSize;
+		height: $rexLogoSize;
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		margin-left: -$rexLogoSize / 2;
+		margin-top: -$rexLogoSize / 2;
+		animation: auto !important;
+	}
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo-react {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo-react {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }