From cc010318159079b7ec505874f27b84299242534b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Thu, 19 Aug 2021 17:53:41 +0800 Subject: [PATCH 1/4] =?UTF-8?q?=E6=B7=BB=E5=8A=A0postcss=20tailwind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 1 + craco.config.js | 35 ++++++++++++++++------------------- package.json | 7 ++++++- postcss.config.js | 7 +++++++ src/styles/app.scss | 3 +++ tailwind.config.js | 11 +++++++++++ 6 files changed, 44 insertions(+), 20 deletions(-) create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/.eslintignore b/.eslintignore index 29a10d6..4257ea4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,7 @@ src/registerServiceWorker.js src/**/test/** craco.config.js +postcss.config.js /build /config src/serviceWorker.js diff --git a/craco.config.js b/craco.config.js index 7378967..aaa9542 100644 --- a/craco.config.js +++ b/craco.config.js @@ -5,10 +5,15 @@ * - whenTest ☞ process.env.NODE_ENV === 'test' * - whenProd ☞ process.env.NODE_ENV === 'production' */ - const { when, whenDev, whenProd, whenTest } = require('@craco/craco') +const { when, whenDev, whenProd, whenTest } = require('@craco/craco'); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); -const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' ) -const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin') +const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' ); +const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin'); + +// style相关 +const TailWindCss = require('tailwindcss'); +const AutoPrefixer = require('autoprefixer'); + // const FastRefreshCracoPlugin = require('craco-fast-refresh') const path = require('path'); @@ -24,21 +29,7 @@ const resolve = (dir) => path.join(__dirname, dir); module.exports = { webpack: { alias: { - '@': resolve('src'), - '@api': resolve('src/api'), - '@assects': resolve('src/assets'), - '@compontents': resolve('src/compontents'), - '@config': resolve('src/config'), - '@hooks': resolve('src/hooks'), - '@interface': resolve('src/interface'), - '@layouts': resolve('src/layouts'), - '@model': resolve('src/model'), - '@router': resolve('src/router'), - '@store': resolve('src/store'), - '@styles': resolve('src/styles'), - '@typings': resolve('src/typings'), - '@utils': resolve('src/utils'), - '@views': resolve('src/views'), + '@': resolve('src') }, plugins: [ // 观察打包进度 @@ -65,5 +56,11 @@ module.exports = { // { // plugin: FastRefreshCracoPlugin // } - ] + ], + style: { + postcss: { + mode: "file", // 设置file模式通过postcss.config.js来配置 + } + } } + \ No newline at end of file diff --git a/package.json b/package.json index 598c084..938b89e 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,6 @@ "homepage": "/react-store-admin", "dependencies": { "@ant-design/icons": "^4.6.2", - "@craco/craco": "^6.2.0", "@icon-park/react": "^1.3.3", "@types/node": "^15.12.4", "@types/react": "^17.0.11", @@ -58,6 +57,8 @@ ] }, "devDependencies": { + "@craco/craco": "^6.2.0", + "@tailwindcss/postcss7-compat": "^2.2.7", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^13.1.9", @@ -67,6 +68,9 @@ "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "antd-dayjs-webpack-plugin": "^1.0.6", + "postcss": "^8.3.6", + "postcss-import": "^14.0.2", + "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "babel-plugin-import": "^1.13.3", "babel-plugin-transform-decorators-legacy": "^1.3.5", @@ -81,6 +85,7 @@ "eslint-plugin-react-hooks": "^4.2.0", "node-sass": "^6.0.0", "sass-resources-loader": "^2.2.3", + "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "typescript": "^4.3.4", "typescript-plugin-css-modules": "^3.4.0" }, diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..c8afa77 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,7 @@ +module.exports = { + plugins: [ + require('postcss-import'), + require('tailwindcss'), + require('autoprefixer'), + ] +} \ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index 9b7aa41..66a5f87 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,4 +1,7 @@ @import '~antd/dist/antd.css'; +@import 'tailwindcss/base'; +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; @import 'common'; @import 'override'; @import 'main'; \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..62dfdaf --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,11 @@ +module.exports = { + purge: [], + darkMode: false, // or 'media' or 'class' + theme: { + extend: {}, + }, + variants: { + extend: {}, + }, + plugins: [], +} -- Gitee From 4e6584c9650a51a2f7479159ce127fd55ec601de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Fri, 20 Aug 2021 09:43:45 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix=E6=8A=A5=E9=94=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 8 ++++---- src/styles/app.scss | 2 +- tailwind.config.js | 7 ++++++- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 938b89e..0429fa5 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react-router": "^5.1.15", "ahooks": "^2.10.9", "antd": "^4.16.3", + "autoprefixer": "^9.8.6", "axios": "^0.21.1", "dayjs": "^1.10.5", "js-cookie": "^2.2.1", @@ -19,6 +20,8 @@ "mobx": "^6.3.2", "mobx-react": "^7.2.0", "nprogress": "^0.2.0", + "postcss": "^7.0.36", + "postcss-import": "^12.0.1", "react": "^17.0.2", "react-copy-to-clipboard": "^5.0.3", "react-dom": "^17.0.2", @@ -28,6 +31,7 @@ "react-transition-group": "^4.4.2", "screenfull": "^5.1.0", "simple-progress-webpack-plugin": "^2.0.0", + "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "web-vitals": "^1.1.2", "webpack-bundle-analyzer": "^4.4.2" }, @@ -68,9 +72,6 @@ "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "antd-dayjs-webpack-plugin": "^1.0.6", - "postcss": "^8.3.6", - "postcss-import": "^14.0.2", - "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "babel-plugin-import": "^1.13.3", "babel-plugin-transform-decorators-legacy": "^1.3.5", @@ -85,7 +86,6 @@ "eslint-plugin-react-hooks": "^4.2.0", "node-sass": "^6.0.0", "sass-resources-loader": "^2.2.3", - "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "typescript": "^4.3.4", "typescript-plugin-css-modules": "^3.4.0" }, diff --git a/src/styles/app.scss b/src/styles/app.scss index 66a5f87..5f58738 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,4 +1,4 @@ -@import '~antd/dist/antd.css'; +@import 'antd/dist/antd.css'; @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; diff --git a/tailwind.config.js b/tailwind.config.js index 62dfdaf..8824346 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,10 @@ module.exports = { - purge: [], + purge: [ + './src/**/*.html', + './src/**/*.tsx', + './src/**/*.ts', + './src/**/*.js', + ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, -- Gitee From 0bba714ef8784abaa3180b56830eadf6cc39565f Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Sun, 22 Aug 2021 10:52:32 +0800 Subject: [PATCH 3/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dtailwindcss=20=E9=83=A8?= =?UTF-8?q?=E5=88=86=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- craco.config.js | 10 ++++++---- package.json | 8 ++++---- postcss.config.js | 11 +++++------ src/views/login/login.scss | 12 ++++++------ 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/craco.config.js b/craco.config.js index aaa9542..e4102d7 100644 --- a/craco.config.js +++ b/craco.config.js @@ -59,8 +59,10 @@ module.exports = { ], style: { postcss: { - mode: "file", // 设置file模式通过postcss.config.js来配置 - } - } + plugins: [ + require('tailwindcss'), + require('autoprefixer'), + ], + }, + }, } - \ No newline at end of file diff --git a/package.json b/package.json index 938b89e..0429fa5 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/react-router": "^5.1.15", "ahooks": "^2.10.9", "antd": "^4.16.3", + "autoprefixer": "^9.8.6", "axios": "^0.21.1", "dayjs": "^1.10.5", "js-cookie": "^2.2.1", @@ -19,6 +20,8 @@ "mobx": "^6.3.2", "mobx-react": "^7.2.0", "nprogress": "^0.2.0", + "postcss": "^7.0.36", + "postcss-import": "^12.0.1", "react": "^17.0.2", "react-copy-to-clipboard": "^5.0.3", "react-dom": "^17.0.2", @@ -28,6 +31,7 @@ "react-transition-group": "^4.4.2", "screenfull": "^5.1.0", "simple-progress-webpack-plugin": "^2.0.0", + "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "web-vitals": "^1.1.2", "webpack-bundle-analyzer": "^4.4.2" }, @@ -68,9 +72,6 @@ "@typescript-eslint/eslint-plugin": "^4.28.0", "@typescript-eslint/parser": "^4.28.0", "antd-dayjs-webpack-plugin": "^1.0.6", - "postcss": "^8.3.6", - "postcss-import": "^14.0.2", - "autoprefixer": "^9.8.6", "babel-eslint": "^10.1.0", "babel-plugin-import": "^1.13.3", "babel-plugin-transform-decorators-legacy": "^1.3.5", @@ -85,7 +86,6 @@ "eslint-plugin-react-hooks": "^4.2.0", "node-sass": "^6.0.0", "sass-resources-loader": "^2.2.3", - "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7", "typescript": "^4.3.4", "typescript-plugin-css-modules": "^3.4.0" }, diff --git a/postcss.config.js b/postcss.config.js index c8afa77..f1c8dac 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,7 +1,6 @@ module.exports = { - plugins: [ - require('postcss-import'), - require('tailwindcss'), - require('autoprefixer'), - ] -} \ No newline at end of file + plugins: { + tailwindcss: {}, + autoprefixer: {}, + } +} diff --git a/src/views/login/login.scss b/src/views/login/login.scss index 9fe9892..daad546 100644 --- a/src/views/login/login.scss +++ b/src/views/login/login.scss @@ -20,15 +20,15 @@ } } .imgcode-item{ - .ant-form-item-control-input-content{ - display: flex; - } - .ant-form-item-control-input{ - width: 322px; + .ant-form-item-control-input-content { + @apply flex; + .ant-form-item { + width: 322px; + } } .captcha{ height: 40px; border: 1px solid #ccc; cursor: pointer; } -} \ No newline at end of file +} -- Gitee From 0859d1611e25392a3d6cd07da05520ef470d1e80 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Mon, 23 Aug 2021 00:41:23 +0800 Subject: [PATCH 4/4] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dtailwindcss=E5=86=B2?= =?UTF-8?q?=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - src/layouts/index.scss | 11 +++++++---- src/styles/app.scss | 4 ++-- src/styles/common.scss | 6 +++++- 4 files changed, 14 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 0429fa5..193b22a 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,6 @@ "mobx-react": "^7.2.0", "nprogress": "^0.2.0", "postcss": "^7.0.36", - "postcss-import": "^12.0.1", "react": "^17.0.2", "react-copy-to-clipboard": "^5.0.3", "react-dom": "^17.0.2", diff --git a/src/layouts/index.scss b/src/layouts/index.scss index 490f3d1..da457f2 100644 --- a/src/layouts/index.scss +++ b/src/layouts/index.scss @@ -31,10 +31,13 @@ height: 64px; line-height: 64px; overflow: hidden; - .app-logo-img{ - width: 60px; - margin-left: 25px; - animation: app-logo-spin infinite 10s linear; + .logo-wrap { + @apply flex; + .app-logo-img{ + width: 60px; + margin-left: 25px; + animation: app-logo-spin infinite 10s linear; + } } @keyframes app-logo-spin { from { diff --git a/src/styles/app.scss b/src/styles/app.scss index 5f58738..445d507 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,7 +1,7 @@ -@import 'antd/dist/antd.css'; +@import '~antd/dist/antd.css'; @import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities'; @import 'common'; @import 'override'; -@import 'main'; \ No newline at end of file +@import 'main'; diff --git a/src/styles/common.scss b/src/styles/common.scss index 3cf2b31..c312cef 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -19,4 +19,8 @@ a:hover { visibility: hidden; display: block; clear: both; -} \ No newline at end of file +} +svg,img { + display: block!important; + vertical-align: center!important; +} -- Gitee