vue文件怎么引入css

百变鹏仔 3个月前 (09-25) #VUE

文章标签文件

在 vue 文件中引入 css 的方法包括：内联样式、scoped 样式、外部 css、css 预处理器和样式绑定。选择合适的方法取决于具体情况，如内联样式适合小型样式，scoped 样式用于组件特定样式，外部 css适用于大型样式，css 预处理器提供高级功能，样式绑定用于动态样式。

Vue 文件中如何引入 CSS

在 Vue 文件中引入 CSS 有多种方法。

1. 内联样式

可在 template 标签内直接使用 style 属性：

立即学习“前端免费学习笔记（深入）”；

<template><div style="color: red;">Hello World</div></template>

2. scoped 样式

在 style 标签中使用 scoped 属性，将样式作用域限制在当前组件内：

<template><style scoped>    .my-class {      color: blue;    }  </style><div class="my-class">Hello World</div></template>

3. 外部 CSS

使用 CSS 导入语法链接到外部 CSS 文件：

<style>  @import "./styles.css";</style>

4. CSS 预处理器

使用像 Sass 或 Less 这样的 CSS 预处理器，可以在 Vue 文件内编写样式，然后编译为标准 CSS：

<style lang="sass">  .my-class {    color: red;  }</style>

5. 样式绑定

使用 v-bind:class 或 v-bind:style 属性动态绑定样式：

<template><div v-bind:style="{ color: 'red' }">Hello World</div></template>

选择哪种方法取决于具体情况：

文章推荐