35 在Vue3中如何通过SCSS编写样式

概述

在Vue3中通过SCSS编写样式并不难,这节课我们来简单的学习一下。

本节课需要依赖一个第三方库,我们先安装:

bash 复制代码
yarn add sass -D

基本用法

我们创建src/components/Demo35.vue,代码如下:

html 复制代码
<template>
  <button>这是一个按钮</button>
</template>
<style lang="scss">
button {
  color: red;
  width: 100px;
  height: 30px;
  padding: 5px;
}
</style>

接着,我们修改src/App.vue:

html 复制代码
<script setup>
import Demo from "./components/Demo35.vue"
</script>
<template>
  <h1>欢迎跟着Python私教一起学习Vue3入门课程</h1>
  <hr>
  <demo/>
</template>

然后,我们浏览器访问:http://localhost:5173/

完整代码

package.json

json 复制代码
{
  "name": "hello",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "countable": "^3.0.1",
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "sass": "^1.69.5",
    "vite": "^5.0.0"
  }
}

vite.config.js

js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

index.html

html 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/main.js

js 复制代码
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue

html 复制代码
<script setup>
import Demo from "./components/Demo35.vue"
</script>
<template>
  <h1>欢迎跟着Python私教一起学习Vue3入门课程</h1>
  <hr>
  <demo/>
</template>

src/components/Demo35.vue

html 复制代码
<template>
  <button>这是一个按钮</button>
</template>
<style lang="scss">
button {
  color: red;
  width: 100px;
  height: 30px;
  padding: 5px;
}
</style>

启动方式

bash 复制代码
yarn
yarn dev

浏览器访问:http://localhost:5173/

相关推荐
excel4 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子11 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构18 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep19 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss23 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风24 分钟前
html二次作业
前端·html
江城开朗的豌豆27 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵28 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae
画月的亮31 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf
江城开朗的豌豆37 分钟前
拆解Redux:从零手写一个状态管理器,彻底搞懂它的魔法!
前端·javascript·react.js