chore: add prefix for sass variables

Author: xiejay97

packages/platform/src/app/routes/layout/header/Header.module.scss

@@ -9,7 +9,7 @@
   width: 100%;
   height: 64px;
   padding: 0 16px 0 0;
-  color: map.get($colors, 'white');
+  color: map.get($d-colors, 'white');
   /* stylelint-disable-next-line declaration-property-value-allowed-list */
   background-color: #001529;
   box-shadow: 0 2px 8px 0 var(--d-shadow-color);

packages/platform/src/styles/_app.scss

@@ -14,17 +14,17 @@ body {
 
 .app-link {
   font: inherit;
-  color: var(--#{$variable-prefix}color-primary);
+  color: var(--#{$d-prefix}color-primary);
   text-decoration: none;
-  transition: color var(--#{$variable-prefix}animation-duration-fast) linear;
+  transition: color var(--#{$d-prefix}animation-duration-fast) linear;
 
   &:hover,
   &:focus {
-    color: var(--#{$variable-prefix}color-primary-lighter);
+    color: var(--#{$d-prefix}color-primary-lighter);
   }
 
   &:active {
-    color: var(--#{$variable-prefix}color-primary-darker);
+    color: var(--#{$d-prefix}color-primary-darker);
   }
 }
 

packages/platform/src/styles/_components.scss

@@ -1,8 +1,9 @@
 @import 'variables';
 
-@import '~rfs/scss';
-
-@import 'vendor/bootstrap';
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/mixins';
 
 @import '~@react-devui/ui/styles/variables';
 @import '~@react-devui/ui/styles/mixins';

packages/platform/src/styles/_module.scss

@@ -1 +1 @@
-$namespace: 'app';
+$d-namespace: 'app';

packages/platform/src/styles/_variables.scss

@@ -1,8 +1,13 @@
-@import 'vendor/ui';
 @import 'vendor/bootstrap';
+@import 'vendor/ui';
 
 @import 'variables';
 
-@import 'root';
-@import 'components';
 @import 'app';
+
+@import 'root';
+
+@import 'components/fcp-loader';
+@import 'components/language';
+@import 'components/list';
+@import 'components/route-header';

packages/platform/src/styles/index.scss

@@ -1,24 +1,26 @@
-$grid-breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px,
-);
-$enable-important-utilities: true;
-
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~bootstrap/scss/mixins/utilities';
-
-$utilities: (
-  'display': (
-    responsive: true,
-    print: true,
-    property: display,
-    class: d,
-    values: inline inline-block block grid table table-row table-cell flex inline-flex none,
-  ),
-);
+// Custom.scss
+// Option B: Include parts of Bootstrap
 
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+@import '~bootstrap/scss/functions';
+
+// 2. Include any default variable overrides here
+
+// 3. Include remainder of required Bootstrap stylesheets
+@import '~bootstrap/scss/variables';
+
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import '~bootstrap/scss/maps';
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+
+// 6. Optionally include any other parts as needed
+@import '~bootstrap/scss/utilities';
+@import '~bootstrap/scss/grid';
+
+// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
 @import '~bootstrap/scss/utilities/api';
+
+// 8. Add additional custom code here

packages/platform/src/styles/vendor/bootstrap.scss

@@ -23,12 +23,12 @@ export default function App() {
 
 ## Variable conflict
 
-All our css variables have namespaces added, the default is `d`, if our css variables conflict with your project, you can modify `$namespace`.
+All our css variables have namespaces added, the default is `d`, if our css variables conflict with your project, you can modify `$d-namespace`.
 
-Note: `$namespace` also affects stylesheets, so you need to modify the `DRoot` configuration:
+Note: `$d-namespace` also affects stylesheets, so you need to modify the `DRoot` configuration:
 
 ```scss
-$namespace: 'app';
+$d-namespace: 'app';
 ```
 
 ```tsx

packages/site/src/app/routes/docs/dynamic-theme/DynamicTheme.md

@@ -23,12 +23,12 @@ export default function App() {
 
 ## 变量冲突
 
-我们的 css 变量均添加了命名空间，默认为 `d`，如果我们的 css 变量与您项目冲突，可以修改 `$namespace`。
+我们的 css 变量均添加了命名空间，默认为 `d`，如果我们的 css 变量与您项目冲突，可以修改 `$d-namespace`。
 
-注意：`$namespace` 同样影响样式表，所以您需要修改 `DRoot` 的配置：
+注意：`$d-namespace` 同样影响样式表，所以您需要修改 `DRoot` 的配置：
 
 ```scss
-$namespace: 'app';
+$d-namespace: 'app';
 ```
 
 ```tsx

packages/site/src/app/routes/docs/dynamic-theme/DynamicTheme.zh-CN.md

@@ -19,7 +19,14 @@ Global style:
 Import on demand:
 
 ```scss
-@import '~@react-devui/ui/styles/custom';
+@import '~@react-devui/ui/styles/variables';
+
+@import '~@react-devui/ui/styles/mixins';
+
+@import '~@react-devui/ui/styles/root';
+@import '~@react-devui/ui/styles/reboot';
+@import '~@react-devui/ui/styles/animations';
+@import '~@react-devui/ui/styles/common';
 
 @import '~@react-devui/ui/styles/components/button';
 ```