Umi.js 中 global.less 文件的使用与注意事项

全局样式与局部样式的区别

在 Umi.js 项目中，src/global.less 文件是一个特殊的全局样式文件，它会被自动注入到项目的全局样式中。然而，很多开发者容易混淆全局样式和全局 Less 变量的概念。

global.less 的实际作用

global.less 文件主要用于定义全局 CSS 样式和 CSS 变量（Custom Properties）。这些样式会直接应用到整个项目中，不需要额外导入。例如：

:root {
  --primary-color: #1890ff;
}

这样定义的 CSS 变量可以在项目任何地方的样式文件中直接使用：

.button {
  color: var(--primary-color);
}

Less 变量的作用域限制

需要注意的是，虽然 global.less 中的 CSS 变量是全局可用的，但其中的 Less 变量（如 @primary-color）并不会自动成为全局变量。Less 变量遵循模块化原则，需要显式导入才能使用。

最佳实践方案

1. 对于 CSS 变量：使用 global.less 定义全局 CSS 变量
2. 对于 Less 变量：创建单独的变量文件（如 variables.less），然后在需要的地方导入

// src/styles/variables.less
@primary-color: #1890ff;

使用时需要显式导入：

@import '~@/styles/variables.less';

.button {
  color: @primary-color;
}

常见问题排查

如果在 Umi.js 项目中遇到样式不生效的问题，可以检查以下几点：

1. 确认文件命名是否正确（必须是 global.less）
2. 检查文件位置是否在 src 目录下
3. 确认使用的是 CSS 变量还是 Less 变量
4. 检查是否开启了某些特殊配置（如 mfsu）影响了样式加载

通过正确理解 Umi.js 中样式文件的作用域和加载机制，可以更高效地管理项目样式，避免常见的样式不生效问题。