vue中如何引入css

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

在 Vue 中引入 CSS

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

1. 全局 CSS 文件

• 在 标签中引入 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

• 使用 标签将 CSS 作用于当前组件。

  <style scoped>
  .my-class {
    color: red;
  }
  </style><template><p class="my-class">Hello World</p>
  </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><p class="my-class">Hello World</p>
  </template>

  登录后复制

5. 外部 CSS 文件

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

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

  登录后复制

以上就是vue中如何引入css的详细内容，更多请关注叮当号网其它相关文章！