vue中如何引入css- 技术经验 -卓越飞翔博客

vue 中引入 css 的方法：1. 全局 css 文件；2. 局部 css；3. css 预处理器；4. css 模块；5. 外部 css 文件。

vue中如何引入css

在 Vue 中引入 CSS

在 Vue 应用程序中引入 CSS，有以下几种方法：

1. 全局 CSS 文件

在

<style>
@import "./styles.<a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15716.html" target="_blank">css";
</style>

2. 局部 CSS

使用

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

3. CSS 预处理器

使用 CSS 预处理器（如 Sass、LESS）来写 CSS。
首先安装预处理器包，然后在 .vue 文件中引入它们。

Sass

<style lang="sass">
  @import "./styles.scss";
</style>

LESS

<style lang="less">
  @import "./styles.less";
</style>

4. CSS 模块

使用 CSS 模块将 CSS 类名限定在当前组件中。

// styles.module.css
.my-class {
color: red;
}

// MyComponent.vue
<style module>
.my-class {
  /* 组件内唯一的类名 */
}
</style><template><div class="my-class">Hello World</div>
</template>

5. 外部 CSS 文件

使用 link 标签引入外部 CSS 文件。


<link rel="stylesheet" href="./styles.css">

相关推荐