前端开发|样式导入：vue怎么引入css，Vue项目中如何引入CSS

Vue项目CSS引入全攻略：2025年最新实践指南

2025年7月消息：随着Vue 3.4的稳定版发布，CSS模块化支持得到进一步增强，现在开发者可以通过更简洁的语法在单文件组件中实现样式隔离，PostCSS 8.0的深度集成让变量注入和样式压缩变得更加高效。

为什么需要关注CSS引入方式？

在Vue项目中,CSS管理直接影响项目的可维护性和性能，错误的引入方式可能导致样式污染、加载冗余或打包体积过大，2025年主流的CSS引入方式主要有以下5种，每种都有其适用场景。

基础引入方式

单文件组件内直接编写

<template>
  <div class="demo-box">内容</div>
</template>
<style scoped>
/* 带scoped属性的样式仅作用于当前组件 */
.demo-box {
  color: #42b983;
  border: 1px solid var(--primary-color);
}
</style>

优点：天然支持CSS变量，scoped属性自动实现样式隔离
注意：深度选择器已更新为 :deep() 语法替代旧的 /deep/

全局样式文件引入

在 main.js 或入口文件：

import './assets/styles/global.css'

适用场景：重置样式、动画库、字体定义等全局配置

进阶方案

CSS预处理器集成

安装对应loader后（如 sass-loader），可直接使用：

<style lang="scss">
$primary: #1890ff;
.container {
  padding: 20px;
  &:hover {
    background: lighten($primary, 10%);
  }
}
</style>

2025年趋势：Sass仍占主流，但Lightning CSS等新工具开始流行

CSS Modules用法

配置 vue.config.js：

module.exports = {
  css: {
    modules: true
  }
}

组件中使用：

<template>
  <div :class="$style.redText">模块化样式</div>
</template>
<style module>
.redText {
  color: #f44336;
}
</style>

动态样式方案

动态CSS变量控制

<script setup>
const themeColor = ref('#4CAF50')
</script>
<template>
  <div :style="{ '--theme-color': themeColor }">动态主题</div>
</template>
<style>
div {
  background: var(--theme-color);
}
</style>

性能优化建议

1. 按需加载：使用 import() 动态导入CSS
2. 原子化CSS：2025年推荐使用UnoCSS或Tailwind 4.0
3. 关键CSS提取：通过 critters 插件实现首屏优化

常见问题排查

• 样式不生效：检查loader配置、scoped冲突或选择器优先级
• 字体路径错误：使用 ~@/assets/ 别名时注意webpack版本差异
• 预处理器报错：确保安装了对应版本的 node-sass 或 dart-sass

掌握这些方法,你的Vue项目样式管理将更加游刃有余，根据项目规模选择合适的方案，小型项目推荐单文件组件+全局样式，中大型项目建议采用CSS Modules与原子化CSS结合的策略。