Vue2极简教程008-less全局样式和局部样式定义

Vue2极简教程008：Less全局样式与局部样式精要指南

一、全局样式定义方案

1. 创建全局样式文件

// src/styles/global.less
@primary-color: #42b983;  // 全局变量
@font-size-base: 14px;

// 全局重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

// 全局混合(Mixin)
.text-ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. 在Vue配置中全局引入

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        additionalData: `
          @import "@/styles/global.less";
        `,
        javascriptEnabled: true
      }
    }
  }
}

3. 全局样式生效范围

• 所有Vue组件自动继承变量和混合
• 重置样式作用于整个项目
• 适合定义：主题变量/公共动画/基础样式

二、局部样式定义方案

1. 单文件组件样式（scoped）

<style lang="less" scoped>
/* 组件私有变量 */
@local-color: #ff4757;

.container {
  // 使用全局变量
  background: @primary-color;
  
  .title {
    color: @local-color;
    // 使用全局混合
    .text-ellipsis();
  }
}
</style>

2. 局部样式特性

3. 作用域穿透方案

<style lang="less" scoped>
/* 修改Element UI组件样式 */
::v-deep .el-button {
  font-size: @font-size-base + 2px;
}

/* 简写语法（Vue2.7+） */
:deep(.el-input__inner) {
  border-color: @primary-color;
}
</style>

三、混合使用最佳实践

1. 项目目录结构建议

src/
├── styles/
│   ├── global.less     # 全局样式
│   ├── variables.less  # 全局变量
│   ├── mixins.less     # 全局混合
│   └── components/     # 组件级样式
│       └── button.less
└── components/
    └── MyComponent.vue # 局部样式

2. 样式覆盖优先级

graph TD
    A[浏览器默认样式] --> B[全局reset样式]
    B --> C[第三方库样式]
    C --> D[全局自定义样式]
    D --> E[组件局部样式]
    E --> F[行内样式]

3. 性能优化建议

1. 全局样式：

   • 只包含真正全局的规则
   • 变量和混合单独文件管理
   • 避免直接写元素选择器

2. 局部样式：

   • 尽量使用scoped
   • 避免深层嵌套（不超过3层）
   • 复用全局变量和混合

四、企业级解决方案

1. 主题切换实现

// theme.less
.theme-light {
  @primary-color: #1890ff;
  @text-color: #333;
}

.theme-dark {
  @primary-color: #1da57a;
  @text-color: #f0f0f0;
}

// 动态应用主题
body {
  color: @text-color;
  background: @bg-color;
}

2. CSS Modules集成

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]'
        }
      }
    }
  }
}

<style module lang="less">
.container {
  :global(.ant-btn) {
    color: @primary-color;
  }
}
</style>

五、常见问题解决方案

1. 全局变量不生效

// 检查vue.config.js配置
loaderOptions: {
  less: {
    additionalData: `@import "~@/styles/variables.less";`
  }
}

2. 样式污染问题

// 错误示例（全局污染）
<style lang="less">
.button { /* 会影响所有.button元素 */ }
</style>

// 正确做法
<style lang="less" scoped>
.my-button { /* 只作用于当前组件 */ }
</style>

3. 第三方组件样式修改

// 方案1：全局覆盖（不推荐）
.el-button {
  color: red;
}

// 方案2：局部深度选择（推荐）
<style scoped lang="less">
::v-deep .el-button {
  color: @primary-color;
}
</style>

六、调试技巧

1. 查看编译结果：

   lessc src/styles/global.less

2. SourceMap配置：

   // vue.config.js
   css: {
     sourceMap: process.env.NODE_ENV !== 'production'
   }

3. 样式检查工具：

   • Chrome开发者工具的Styles面板
   • Vue DevTools的Component > Styles

版本注意：Vue2默认使用Less 3.x，如需4.x特性需手动升级：

npm install less@4 --save-dev

通过合理规划全局与局部样式，可以实现：

• 统一的设计语言系统
• 组件样式的完美隔离
• 高效的样式复用机制
• 灵活的主题切换能力