vue 引入css

作者：°妮可罗宾发布日期:2026-05-30 浏览:55

<template>
  <div class="app">
    <h1>Hello Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
/* 在这里引入外部 CSS 文件 */
@import url('./assets/styles.css');

/* 或者直接在 <style> 标签中编写样式 */
.app {
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

解释说明：

@import 语句：在 <style> 标签中使用 @import 可以引入外部的 CSS 文件。例如，上面的代码中通过 @import url('./assets/styles.css'); 引入了位于 ./assets/styles.css 的样式文件。
scoped 属性：在 <style> 标签上添加 scoped 属性可以确保这些样式仅应用于当前组件，而不会影响其他组件。这有助于避免全局样式的冲突。
内联样式：除了引入外部 CSS 文件，你还可以直接在 <style> 标签中编写样式规则，如 .app 类的选择器和样式定义。

上一篇：vue template详解

下一篇：datav vue3