{"id":2688,"date":"2024-11-10T14:29:47","date_gmt":"2024-11-10T06:29:47","guid":{"rendered":"https:\/\/fwq.ai\/blog\/2688\/"},"modified":"2024-11-10T14:29:47","modified_gmt":"2024-11-10T06:29:47","slug":"%e4%bd%bf%e7%94%a8-scss-%e5%92%8c-redux-%e5%9c%a8-react-%e4%b8%ad%e5%88%9b%e5%bb%ba%e4%b8%bb%e9%a2%98%e7%b3%bb%e7%bb%9f","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/2688\/","title":{"rendered":"\u4f7f\u7528 SCSS \u548c Redux \u5728 React \u4e2d\u521b\u5efa\u4e3b\u9898\u7cfb\u7edf"},"content":{"rendered":"

\"\u4f7f\u7528<\/p>\n

\u60a8\u662f\u5426\u66fe\u7ecf\u60f3\u5f00\u53d1\u4e00\u4e2a\u5177\u6709\u591a\u4e2a\u4e3b\u9898\u7684\u5e94\u7528\u7a0b\u5e8f\uff0c\u4f46\u4e0d\u77e5\u9053\u5982\u4f55\u53bb\u505a\uff1f\u6709\u5f88\u591a\u65b9\u6cd5<\/p>\n

\u5b89\u88c5\u4f9d\u8d56\u9879 <\/h2>\n

\u8ba9\u6211\u4eec\u5f00\u59cb\u5b89\u88c5\u6211\u4eec\u9700\u8981\u7684\u4e00\u5207\u3002\u4e3a\u6b64\uff0c\u6211\u4eec\u9700\u8981 s \u548c redux\uff1a<\/p>\n

yarn add sass\nyarn add @reduxjs\/toolkit\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u53ea\u9700\u8fd0\u884c\u6b64\u811a\u672c\u5373\u53ef\u5b89\u88c5\u60a8\u9700\u8981\u7684\u6240\u6709\u5185\u5bb9\uff0c\u5e76\u5141\u8bb8\u6211\u4eec\u5f00\u59cb\u3002<\/p>\n
 \u7b2c 1 \u90e8\u5206\uff1a\u8bbe\u7f6e <\/h2>\n
 \u793e\u4f1a\u4fdd\u969c\u4f53\u7cfb <\/h2>\n
\u8ba9\u6211\u4eec\u9996\u5148\u521b\u5efa\u4e00\u4e2a theme.scss \u6587\u4ef6\u5939\uff0c\u5b83\u5b9e\u9645\u4e0a\u4e0d\u4f1a\u4fdd\u5b58\u6211\u4eec\u7684\u4e3b\u9898\uff0c\u800c\u662f\u4fdd\u5b58\u6240\u6709 sass \u53d8\u91cf\uff0c\u6211\u4eec\u5c06\u5176\u8bbe\u7f6e\u4e3a css \u53d8\u91cf\u3002<\/p>\n
 \u8fd9\u662f\u6211\u4eec\u7684 theme.scss \u6587\u4ef6\u7684\u4ee3\u7801\uff1a <\/h5>\n
$bg1: var(--bg1);\n$bg2: var(--bg2);\n$bg3: var(--bg3);\n$bg4: var(--bg4);\n$ui1: var(--ui1);\n$ui2: var(--ui2);\n$ui3: var(--ui3);\n$ui4: var(--ui4);\n$h1: var(--h1);\n$h2: var(--h2);\n$p1: var(--p1);\n$p2: var(--p2);\n$border-rad: var(--border-rad);\n$border-clr: var(--border-clr);\n$font: var(--font);\/\/etc...\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u8fd9\u53ea\u662f\u6211\u7684\u793a\u4f8b\u7684\u4e00\u4e9b\u8d77\u59cb\u53d8\u91cf\uff0c\u4f46\u8fd9\u662f\u524d\u63d0\u3002
 \u73b0\u5728\uff0c\u5bf9\u4e8e\u6bcf\u4e2a .scss \u6587\u4ef6\uff0c\u6211\u4eec\u9700\u8981\u4f7f\u7528 @use “\/path\/to\/theme”;
 \u5305\u542b\u6b64 theme.scss \u6587\u4ef6 \u5728\u8fd9\u91cc\uff0c\u6211\u4e3a index.scss \u521b\u5efa\u4e86\u4e00\u4e9b\u57fa\u672c\u4ee3\u7801\uff0c\u4ee5\u5411\u6240\u6709\u5143\u7d20\u6dfb\u52a0\u7b80\u5355\u7684\u57fa\u672c\u6837\u5f0f\uff0c\u4f8b\u5982\u6846\u5927\u5c0f\uff0c\u5e76\u8986\u76d6\u5927\u591a\u6570\u9ed8\u8ba4\u8fb9\u8ddd\/\u586b\u5145\uff1a<\/p>\n
@use \"theme\";\n\/\/--------------------\nhtml * {\n  box-sizing: border-box;\n  margin: none;\n  padding: none;\n  justify-content: center;\n  align-items: center;\n  flex-direction: column;\n  font-family: theme.$font;\n}\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 \u4e3b\u9898 <\/h3>\n
\u73b0\u5728\u8ba9\u6211\u4eec\u4ece\u4e3b\u9898\u5f00\u59cb\u3002\u9996\u5148\uff0c\u5728\u540d\u4e3a\u4e3b\u9898\u7684\u65b0\u76ee\u5f55\u4e2d\u521b\u5efa\u4e00\u4e2a\u6587\u4ef6\u3002\u4e4b\u540e\u60a8\u53ef\u4ee5\u5236\u4f5c\u66f4\u591a\uff0c\u4f46\u5728\u672c\u6559\u7a0b\u4e2d\u6211\u53ea\u4f1a\u5236\u4f5c 2 \u4e2a\uff08\u6df1\u8272\u548c\u6d45\u8272\uff09\u3002\u60a8\u53ef\u4ee5\u968f\u65f6\u6269\u5c55\u8fd9\u4e9b\u4e3b\u9898\/\u60f3\u6cd5\uff0c\u6211\u5b8c\u5168\u9f13\u52b1\u60a8\u8fdb\u884c\u5b9e\u9a8c\u3002<\/p>\n
\u7acb\u5373\u5b66\u4e60<\/span>\u201c\u201d\uff1b<\/p>\n
 \u8fd9\u662f\u57fa\u672c\u6a21\u677f\uff08\u8fd9\u5c06\u662f\u6211\u7684\u6df1\u8272\u4e3b\u9898\uff09\uff1a <\/h5>\n
@import url('https:\/\/fonts.cdnfonts.com\/css\/br-segma');\n.dark {\n  --bg1: #202020;\n  --bg2: #171717;\n  --bg3: #131313;\n  --bg4: #101010;\n  --ui1: #252525;\n  --ui2: #303030;\n  --ui3: #353535;\n  --ui4: #404040;\n  --h1: #f5f5f5;\n  --h2: #f0f0f0;\n  --p1: #e0e0e0;\n  --p2: #d5d5d5;\n  --active: #671dc9;\n  --active2: #1b1fec;\n  --border-rad: 10px;\n  --border-clr: #45454590;\n  --font: \"\",sans-serif;\n  --color-scheme: dark;\n}\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 \u5982\u679c\u4f60\u60f3\u77e5\u9053\u7684\u8bdd\uff0c\u8fd9\u662f\u6211\u7684\u89c2\u70b9\uff1a <\/h5>\n
@import url('https:\/\/fonts.cdnfonts.com\/css\/br-segma');\n.light {\n  --bg1: #f0f0f0;\n  --bg2: #e5e5e5;\n  --bg3: #e0e0e0;\n  --bg4: #d5d5d5;\n  --ui1: #e2e2e2;\n  --ui2: #efefef;\n  --ui3: #f2f2f2;\n  --ui4: #f9f9f9;\n  --h1: #070707;\n  --h2: #101010;\n  --p1: #131313;\n  --p2: #171717;\n  --active: #ae70ff;\n  --active2: #797bff;\n  --border-rad: 10px;\n  --border-clr: #45454590;\n  --font: \"\",sans-serif;\n  --color-scheme: light;\n}\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u6211\u5c06\u4e3b\u9898\u9644\u52a0\u5230\u6211\u7684index.scss \u6587\u4ef6\u4e2d\uff0c\u8be5\u6587\u4ef6\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
@use \"theme\";\n@use \"themes\/dark\";\n@use \"themes\/light\";\n\/\/--------------------\n\/\/etc...\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 \u7ec8\u6781\u7248 <\/h2>\n
\u8ba9\u6211\u4eec\u5f00\u59cb\u8bbe\u7f6e\u6211\u4eec\u7684 redux \u5546\u5e97\u3002 
 \u5728\u9879\u76ee\u76ee\u5f55\u7684 src \u4e0b\uff0c\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a store \u7684\u65b0\u6587\u4ef6\u5939\uff0c\u5176\u4e2d\u5305\u542b\u4e00\u4e2a\u540d\u4e3a slices \u7684\u5b50\u76ee\u5f55\u3002\u8ba9\u6211\u4eec\u4ece store \u76ee\u5f55\u4e2d\u7684 store.js \u6587\u4ef6\u5f00\u59cb\u3002<\/p>\n
 \u5b83\u5e94\u8be5\u662f\u8fd9\u6837\u7684\uff1a <\/h5>\n
import { configurestore } from '@reduxjs\/toolkit'\nexport const store=configurestore({\n  reducer:{\n\n  },\n});\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5728\u5f00\u59cb\u4e4b\u524d\uff0c\u8ba9\u6211\u4eec\u5b9e\u9645\u5c06\u6211\u4eec\u7684\u9879\u76ee\u8fde\u63a5\u5230 redux\u3002\u8fd9\u5c31\u662f\u6211\u7684 mn.jsx \u6587\u4ef6\u7684\u6837\u5b50\uff0c\u4f60\u7684\u5e94\u8be5\u770b\u8d77\u6765\u7c7b\u4f3c\uff1a<\/p>\n
import { strictmode } from 'react';\nimport { createroot } from 'react-dom\/client';\nimport app from '.\/app.jsx';\nimport \".\/index.scss\";\nimport { store } from '.\/store\/store';\nimport { provider } from 'react-redux';\ncreateroot(document.getelementbyid('root'))\n  .render(<strictmode>\n    <provider store={store}>\n      <app \/>\n    <\/provider>\n  <\/strictmode>,);\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u73b0\u5728\u8ba9\u6211\u4eec\u521b\u5efa\u5207\u7247\u3002\u5728 slices \u76ee\u5f55\u4e2d\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a themeslice.js \u7684\u6587\u4ef6\u3002<\/p>\n
 \u4ee5\u4e0b\u662f\u5185\u5bb9\uff1a <\/h5>\n
import { createslice } from '@reduxjs\/toolkit'\nexport const themeslice=createslice({\n  name: 'theme',\n  initialstate:\"dark\",\n  reducers: {\n    settheme:(state,action)=>{\n      return action.payload;\n    },\n  },\n})\nexport const { \n  settheme \n}=themeslice.actions;\nexport default themeslice.reducer;\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4ece\u8fd9\u91cc\uff0c\u8ba9\u6211\u4eec\u56de\u5230\u6211\u4eec\u7684\u5546\u5e97\u5e76\u6dfb\u52a0\u6211\u4eec\u7684\u4e3b\u9898\u5207\u7247\u4f5c\u4e3a\u51cf\u901f\u5668\u3002<\/p>\n
 store.js \u73b0\u5728\u5e94\u8be5\u662f\u8fd9\u6837\u7684\uff1a <\/h5>\n
import { configurestore } from '@reduxjs\/toolkit'\nimport themereducer from \".\/slices\/themeslice\";\nexport const store=configurestore({\n  reducer:{\n    theme:themereducer,\n  },\n});\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 \u7b2c 2 \u90e8\u5206\uff1a\u529f\u80fd <\/h2>\n
\u529f\u80fd\u975e\u5e38\u7b80\u5355\u3002\u6211\u4eec\u73b0\u5728\u521b\u5efa\u7684\u662f 2 \u4e2a\u7c7b\uff0c\u5b83\u4eec\u6709\u81ea\u5df1\u7684 css \u53d8\u91cf\uff0c\u4ee5\u53ca\u4e00\u4e2a redux \u72b6\u6001\u6765\u4fdd\u5b58\u5b83\u3002\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u8fd0\u884cdispatch(settheme(\/*\u8fd9\u91cc\u7684\u4e3b\u9898*\/));
\u6765\u8c03\u6574\u6211\u4eec\u7684\u72b6\u6001 \u8981\u5e94\u7528\u6211\u4eec\u7684\u4e3b\u9898\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u6548\u679c\u5c06\u4e3b\u4f53\u7684 classname \u66f4\u6539\u4e3a\u6211\u4eec\u7684\u4e3b\u9898\uff0c\u5e76\u4e14\u4e3a\u4e86\u9632\u6b62\u9519\u8bef\uff0c\u6211\u4eec\u53ef\u4ee5\u6dfb\u52a0\u68c0\u67e5\u4ee5\u786e\u4fdd\u5b83\u662f\u6709\u6548\u7684\u4e3b\u9898\u800c\u4e0d\u662f\u5176\u4ed6\u4e3b\u9898\u3002 <\/p>\n
 \u770b\u8d77\u6765\u662f\u8fd9\u6837\u7684\uff1a <\/h5>\n
useEffect(()=>{\n  switch(theme){\n    case \"dark\":\n    case \"light\":\n      document.body.className=theme;break;\n    default:\n      console.error(\"unrecognized theme\");\n      document.body.className=\"dark\";\n  }\n},[theme]);\n<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
 \u7b2c 3 \u90e8\u5206\uff1a\u51b3\u8d5b <\/h2>\n
\u611f\u8c22\u60a8\u7684\u9605\u8bfb\uff01
 \u8fd9\u662f\u94fe\u63a5<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u4f7f\u7528 SCSS \u548c Redux \u5728 React \u4e2d\u521b\u5efa\u4e3b\u9898\u7cfb\u7edf\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u60a8\u662f\u5426\u66fe\u7ecf\u60f3\u5f00\u53d1\u4e00\u4e2a\u5177\u6709\u591a\u4e2a\u4e3b\u9898\u7684\u5e94\u7528\u7a0b\u5e8f\uff0c\u4f46\u4e0d\u77e5\u9053\u5982\u4f55\u53bb\u505a\uff1f\u6709\u5f88\u591a\u65b9\u6cd5 \u5b89\u88c5\u4f9d\u8d56\u9879 \u8ba9\u6211\u4eec\u5f00\u59cb\u5b89\u88c5\u6211\u4eec\u9700\u8981\u7684\u4e00\u5207\u3002\u4e3a\u6b64\uff0c\u6211\u4eec\u9700\u8981 s \u548c redux\uff1a yarn add sass yarn add @reduxjs\/toolkit \u767b\u5f55\u540e\u590d\u5236 \u53ea\u9700\u8fd0\u884c\u6b64\u811a\u672c\u5373\u53ef\u5b89\u88c5\u60a8\u9700\u8981\u7684\u6240\u6709\u5185\u5bb9\uff0c\u5e76\u5141\u8bb8\u6211\u4eec\u5f00\u59cb\u3002 \u7b2c 1 \u90e8\u5206\uff1a\u8bbe\u7f6e \u793e\u4f1a\u4fdd\u969c\u4f53\u7cfb \u8ba9\u6211\u4eec\u9996\u5148\u521b\u5efa\u4e00\u4e2a theme.scss \u6587\u4ef6\u5939\uff0c\u5b83\u5b9e\u9645\u4e0a\u4e0d\u4f1a\u4fdd\u5b58\u6211\u4eec\u7684\u4e3b\u9898\uff0c\u800c\u662f\u4fdd\u5b58\u6240\u6709 sass \u53d8\u91cf\uff0c\u6211\u4eec\u5c06\u5176\u8bbe\u7f6e\u4e3a css \u53d8\u91cf\u3002 \u8fd9\u662f\u6211\u4eec\u7684 theme.scss \u6587\u4ef6\u7684\u4ee3\u7801\uff1a $bg1: var(–bg1); $bg2: var(–bg2); $bg3: var(–bg3); $bg4: var(–bg4); $ui1: var(–ui1); $ui2: var(–ui2); $ui3: var(–ui3); $ui4: var(–ui4); $h1: var(–h1); $h2: var(–h2); $p1: var(–p1); $p2: var(–p2); $border-rad: var(–border-rad); $border-clr: […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-2688","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=2688"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/2688\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=2688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=2688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=2688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}