upd: use scss

Author: lucaszhu

docusaurus.config.js

@@ -76,7 +76,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
                   blogSidebarCount: 'ALL'
                 },
         theme: {
-          customCss: require.resolve('./src/css/custom.css'),
+          customCss: require.resolve('./src/css/custom.scss'),
         },
       }),
     ],
@@ -279,7 +279,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
       },
     },
   plugins: [
-    'docusaurus-plugin-less',
+    'docusaurus-plugin-sass',
     [
       '@docusaurus/plugin-content-docs',
       {

package-lock.json

@@ -44,7 +44,9 @@
   },
   "devDependencies": {
     "docusaurus-plugin-less": "^2.0.1",
+    "docusaurus-plugin-sass": "^0.2.2",
     "less": "^4.1.1",
-    "less-loader": "^10.0.1"
+    "less-loader": "^10.0.1",
+    "sass": "^1.49.8"
   }
 }

package.json

@@ -0,0 +1,2 @@
+$active-color: #1E78E0;
+$enhance-color: #0F1222;

src/components/Button/index.jsx

@@ -1,11 +1,8 @@
 import React, { useState }  from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import Button from '../../components/Button';
 import config from './config';
-import './index.less';
 import systemConfiguration from '../../js/sysConfig'
-// import 'animate.css';
 
 export default function() {
   const isBrowser = useIsBrowser();

src/components/Button/index.less

@@ -3,7 +3,6 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import config from "./config.json";
 import Layout from '@theme/Layout';
-import './index.less';
 
 export default function() {
     const isBrowser = useIsBrowser();

src/css/custom.css

@@ -1,19 +1,13 @@
 import React, { useState }  from 'react';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import Button from '../../components/Button';
 import config from './config';
-import './index.less';
 import img from './img';
 import Layout from '@theme/Layout';
-import systemConfiguration from '../../js/sysConfig'
-// import 'animate.css';
 
 export default function() {
   const isBrowser = useIsBrowser();
 
-  const [p1Animation, setP1Animation] = useState(false);
-  const [p2Animation, setP2Animation] = useState(false);
   const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ? 'zh-CN' : 'en';
   const dataSource = config?.[language];
 

src/css/custom.scss

@@ -3,7 +3,7 @@ import useIsBrowser from '@docusaurus/useIsBrowser';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import config from "../versions/config.json";
 import Layout from '@theme/Layout';
-import './index.less';
+import styls from './index.module.scss';
 
 export default function() {
     const isBrowser = useIsBrowser();
@@ -16,7 +16,7 @@ export default function() {
 
     return (
         <Layout>
-            <div className="div-one"><br/>
+            <div className="styles.divone"><br/>
                 <h1>{dataSource.title}</h1>
                 <br/>
                 <h3>{dataSource.latestVersion}</h3>

src/css/variable.scss

@@ -1,4 +1,4 @@
-.div-one {
+.divone {
   width: 50%;
   height: 960px;
   margin: 0 auto;