vue3 sass

<template>
  <div class="container">
    <h1>Hello Vue3 with SASS</h1>
    <p>This is a paragraph styled with SASS.</p>
  </div>
</template>

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

<style lang="scss">
$primary-color: #42b983;

.container {
  font-family: Arial, sans-serif;
  color: $primary-color;
  text-align: center;
  margin-top: 50px;

  h1 {
    font-size: 2em;
    margin-bottom: 20px;
  }

  p {
    font-size: 1.2em;
  }
}
</style>

解释说明

1. 模板部分 (<template>):

   • 这里定义了一个简单的HTML结构，包含一个div容器，里面有一个标题和一个段落。

2. 脚本部分 (<script>):

   • 这是一个非常基础的Vue组件定义，指定了组件的名称为App。

3. 样式部分 (<style lang="scss">):

   • 使用了SASS（SCSS语法）来定义样式。
   • 定义了一个变量 $primary-color，其值为 #42b983，并在样式中使用。
   • .container 类选择器用于设置容器的样式，包括字体、颜色、文本对齐方式和外边距。
   • h1 和 p 标签的嵌套样式，分别设置了不同的字体大小和外边距。

通过这种方式，你可以轻松地在Vue3项目中使用SASS进行样式管理。