feat(layout): use css instead of less (#11343)

umijs · Jun 29, 2023 · 85c05ec · 85c05ec
1 parent 6f60dfa
commit 85c05ec
Showing 1 changed file with 32 additions and 34 deletions.
diff --git a/packages/plugins/src/layout.ts b/packages/plugins/src/layout.ts
@@ -133,7 +133,7 @@ import React, { useMemo } from 'react';
 import {
   ProLayout,
 } from "${resolvedPkgPath}";
-import './Layout.less';
+import './Layout.css';
 import Logo from './Logo';
 import Exception from './Exception';
 import { getRightRenderContent } from './rightRender';
@@ -556,7 +556,7 @@ export function getRightRenderContent (opts: {
 
     // Layout.less
     api.writeTmpFile({
-      path: 'Layout.less',
+      path: 'Layout.css',
       content: `
 ${
   // antd@5里面没有这个样式了
@@ -565,52 +565,50 @@ ${
     : "@import '~antd/es/style/themes/default.less';"
 }
 @media screen and (max-width: 480px) {
-  // 在小屏幕的时候可以有更好的体验
+  /* 在小屏幕的时候可以有更好的体验 */
   .umi-plugin-layout-container {
     width: 100% !important;
   }
   .umi-plugin-layout-container > * {
     border-radius: 0 !important;
   }
 }
-.umi-plugin-layout-menu {
-  .anticon {
-    margin-right: 8px;
-  }
-  .ant-dropdown-menu-item {
-    min-width: 160px;
-  }
+.umi-plugin-layout-menu .anticon {
+  margin-right: 8px;
+}
+.umi-plugin-layout-menu .ant-dropdown-menu-item {
+  min-width: 160px;
 }
 .umi-plugin-layout-right {
   display: flex !important;
   float: right;
   height: 100%;
   margin-left: auto;
   overflow: hidden;
-  .umi-plugin-layout-action {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 12px;
-    cursor: pointer;
-    transition: all 0.3s;
-    > i {
-      color: rgba(255, 255, 255, 0.85);
-      vertical-align: middle;
-    }
-    &:hover {
-      background: rgba(0, 0, 0, 0.025);
-    }
-    &:global(.opened) {
-      background: rgba(0, 0, 0, 0.025);
-    }
-  }
-  .umi-plugin-layout-search {
-    padding: 0 12px;
-    &:hover {
-      background: transparent;
-    }
-  }
+}
+.umi-plugin-layout-right .umi-plugin-layout-action {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 12px;
+  cursor: pointer;
+  transition: all 0.3s;
+}
+.umi-plugin-layout-right .umi-plugin-layout-action > i {
+  color: rgba(255, 255, 255, 0.85);
+  vertical-align: middle;
+}
+.umi-plugin-layout-right .umi-plugin-layout-action:hover {
+  background: rgba(0, 0, 0, 0.025);
+}
+.umi-plugin-layout-right .umi-plugin-layout-action.opened {
+  background: rgba(0, 0, 0, 0.025);
+}
+.umi-plugin-layout-right .umi-plugin-layout-search {
+  padding: 0 12px;
+}
+.umi-plugin-layout-right .umi-plugin-layout-search:hover {
+  background: transparent;
 }
 .umi-plugin-layout-name {
   margin-left: 8px;