Web Lion

Appearance

集成样式 ​

在 Umi.js 中，合理地管理局部样式和全局样式对于构建高效且可维护的前端应用至关重要。通过正确配置和使用样式文件，你可以确保样式只应用于需要的地方，同时保持样式的全局一致性。以下是关于如何在 Umi.js 中处理局部样式和全局样式的详细说明。

局部样式 ​

定义与作用范围 ​

局部样式是指仅应用于特定组件或页面的样式。它们通常用于避免样式冲突，并提高样式的可维护性。

实现方式 ​

  1. CSS Modules：这是最推荐的方式，它为每个 CSS 类名生成唯一的哈希值，从而防止样式冲突。

    • 创建 CSS Modules 文件：将你的样式文件命名为 .module.css 或 .module.less（如果你使用的是 Less）。
    css
    /* src/components/Button/button.module.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}
    • 在组件中导入和使用：
    jsx
    // src/components/Button.jsx
import React from "react";
import styles from "./button.module.css";

export default function Button() {
  return <button className={styles.button}>Click Me</button>;
}

  2. Scoped Styles with Webpack：如果你使用的是 Vue 或其他支持 scoped 样式的框架，可以考虑类似的解决方案。不过，Umi.js 主要使用 React，所以推荐使用 CSS Modules。

  3. 内联样式：虽然不常见，但有时可以直接在组件中定义内联样式。

    jsx
    // src/components/Button.jsx
export default function Button() {
  const buttonStyle = {
    backgroundColor: "blue",
    color: "white",
    padding: "10px 20px",
    borderRadius: "5px",
  };
  return <button style={buttonStyle}>Click Me</button>;
}

  4. Styled Components：这是一个流行的库，允许你直接在 JavaScript/TypeScript 文件中编写样式。

    jsx
    // src/components/Button.jsx
import styled from "styled-components";

const StyledButton = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
`;

export default function Button() {
  return <StyledButton>Click Me</StyledButton>;
}

全局样式 ​

定义与作用范围 ​

全局样式是指应用于整个应用程序的样式。它们通常用于设置主题、重置默认样式或定义公共样式类。

实现方式 ​

  1. 引入全局样式文件

    • 在 src/global.less 或 src/global.css 中定义全局样式。
    less
    // src/global.less
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  width: 80%;
  margin: 0 auto;
}
    • 确保在 Umi.js 配置中引入这些全局样式文件：
    javascript
    // .umirc.js 或 config/config.js
export default {
  extraPostCSSPlugins: [
    require("postcss-import")(),
    require("postcss-url")(),
    require("autoprefixer")(),
  ],
  lessLoaderOptions: {
    lessOptions: {
      javascriptEnabled: true,
    },
  },
  cssLoaderOptions: {
    modules: {
      localIdentName: "[local]_[hash:base64:5]",
    },
  },
  chainWebpack(config) {
    config.entry("app").add("./src/global.less");
  },
};

  2. 使用 App 组件注入全局样式

    如果你更倾向于在代码中动态加载全局样式，可以在 src/app.tsx 或 src/app.jsx 中进行。

    jsx
    // src/app.tsx
import React from "react";
import "./global.less"; // 引入全局样式

export default () => <React.Fragment />;

  3. 主题配置

    对于更复杂的应用，你可能希望使用主题配置来管理全局样式。Umi.js 支持通过配置文件指定主题变量，特别是当你使用 Less 时。

    javascript
    // .umirc.js 或 config/config.js
export default {
  theme: {
    "@primary-color": "#1DA57A", // 设置主题颜色
  },
};

    然后在你的 Less 文件中使用这些变量：

    less
    // src/global.less
@import "~antd/lib/style/themes/default";

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: @text-color;
}

使用 Less ​

1. 安装依赖 ​

首先，你需要安装 less 和 less-loader：

bash
npm install less less-loader --save-dev

2. 修改配置文件 ​

如果你使用的是 Umi 3.x 或更高版本，可以通过 .umirc.ts 或 config/config.ts 文件中的 chainWebpack 方法来添加对 less 的支持。对于较低版本的 Umi.js，你也可以通过类似的配置来实现。

typescript
// .umirc.ts 或 config/config.ts
import { defineConfig } from "umi";

export default defineConfig({
  // 其他配置项...
  chainWebpack(config) {
    const lessRule = config.module.rule("less");
    lessRule.test(/\.less$/);
    lessRule
      .use("less-loader")
      .loader("less-loader")
      .options({
        lessOptions: {
          javascriptEnabled: true, // 如果需要解析 JavaScript，请启用此选项
        },
      });
  },
});

3. 使用全局变量或主题配置 ​

如果你想使用自定义的 Less 变量或主题，可以通过 theme 配置项来设置：

typescript
export default defineConfig({
  theme: {
    "@primary-color": "#1DA57A", // 设置主题颜色
    // 更多 Less 变量...
  },
  // 其他配置项...
});

4. 引入 Less 文件 ​

你可以在组件或页面中直接引入 .less 文件：

jsx
// src/pages/index.jsx
import React from "react";
import styles from "./index.less"; // 引入局部样式

export default function IndexPage() {
  return <div className={styles.welcome}>Welcome to Umi!</div>;
}

或者在 src/global.less 中定义全局样式，并确保它被正确引入。

使用 SCSS ​

1. 安装依赖 ​

首先，你需要安装 node-sass 或 sass（推荐使用 dart-sass）和 sass-loader：

bash
npm install sass sass-loader --save-dev

注意：node-sass 已经停止维护，推荐使用 sass，它是 dart-sass 的 Node.js 包装器。

2. 修改配置文件 ​

同样地，你可以通过 .umirc.ts 或 config/config.ts 文件中的 chainWebpack 方法来添加对 scss 的支持。

typescript
// .umirc.ts 或 config/config.ts
import { defineConfig } from "umi";

export default defineConfig({
  // 其他配置项...
  chainWebpack(config) {
    const scssRule = config.module.rule("scss");
    scssRule.test(/\.scss$/);
    scssRule
      .use("sass-loader")
      .loader("sass-loader")
      .options({
        implementation: require("sass"), // 使用 dart-sass
      });
  },
});

3. 使用全局变量或导入 ​

如果你有全局的 SCSS 文件（例如包含变量或混入），你可以通过 sass-resources-loader 来自动导入这些资源：

bash
npm install sass-resources-loader --save-dev

然后修改 chainWebpack 配置：

typescript
chainWebpack(config) {
  const scssRule = config.module.rule('scss');
  scssRule.use('sass-resources-loader')
    .loader('sass-resources-loader')
    .options({
      resources: ['./src/styles/variables.scss'], // 指定全局资源文件路径
    });
}

4. 引入 SCSS 文件 ​

你可以在组件或页面中直接引入 .scss 文件：

jsx
// src/components/Button/button.jsx
import React from "react";
import styles from "./button.module.scss"; // 引入局部样式

export default function Button() {
  return <button className={styles.button}>Click Me</button>;
}

总结 ​

  • 局部样式：适用于特定组件或页面，推荐使用 CSS Modules 来避免样式冲突并提高可维护性。也可以使用内联样式或 styled-components。
  • 全局样式：适用于整个应用，可以通过引入全局样式文件或在 App 组件中注入来实现。对于复杂的主题配置，建议使用 Umi.js 的主题配置功能。

通过合理划分局部样式和全局样式，你可以构建出结构清晰、性能优良的应用程序。

Released under the MIT License.

Copyright © 2025-present Void Wind