vue3实战-----集成sass

已于 2025-03-21 15:10:54 修改
阅读量683 收藏 4
点赞数 8
CC 4.0 BY-SA版权
分类专栏： Vue3+TS+Vite实战代码规范 前端 文章标签： sass 前端 vue3实战 typescript
于 2025-02-13 15:42:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fageaaa/article/details/145613125

vue3实战-----集成sass

1.安装

在使用scss之前需要安装sass和sass-loader两个插件。
在这里插入图片描述

2.使用

安装好之后就可以在组件中使用scss了。需要加上lang=“scss”。
在这里插入图片描述
注意:scss中变量用$,less中变量用@。

3.全局样式文件中不能使用变量

我们经常需要为项目添加一些全局的样式。
在src/styles目录下创建一个index.scss文件。
在这里插入图片描述
项目中需要用到清除默认样式，因此在index.scss引入reset.scss。

@import reset.scss

在入口文件main.ts引入:

import '@/styles'

最低0.47元/天 解锁文章
Vue3中使用Sass详解
2301_79099480的博客
05-06 1635
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
Vue3中集成sass（sass的使用 ）
LQlove1的博客
05-21 1830
重置样式生效，但是无法给项目引入全局变量$
Vue3集成sass
最新发布
程序员张三
04-22 458
【代码】Vue3集成sass。
vue3 集成 Sass
ling_zhi_xin的博客
08-22 929
配置scss 全局变量 @import “./src/styles/variable.scss”;冒号不能少不然会报错。在src 文件夹下 创建 styles 并创建 index.scss 引入到项目。清除全局样式 reset.scss。
Vue3 使用sass
qq_29744347的博客
05-09 1931
文章目录安装扩展和依赖文件后缀使用sass的好处可以嵌套可以声明使用变量可以封装函数 安装扩展和依赖 npm install node-sass sass-loader --save-dev 文件后缀 文件使用scss后缀 写style时声明lang=scss <style scoped lang="scss"> # 这里写样式 </style> 使用sass的好处 可以嵌套 # 不使用sass可以这么写 .container a { color:black } # 使用
Vue 人资 实战篇一 vue-element-admin学习，项目初始化，sass运用
m0_55170432的博客
05-31 1061
人力资源的环境搭建 1.0 vue-element-admin的了解和介绍 vue-element-admin (https://panjiachen.gitee.io/vue-element-admin-site/zh/) 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 是一个后台集成方案, 集成了PC项目中很多的业
python vue admin_介绍 | vue-element-admin
weixin_35079144的博客
12-30 1122
# 介绍 vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么，本项目都能帮助到你。建议本项目的定位是后台集成方案，不太适合当基础模板来进行二次开发...
vue-weixin-master.zip_js聊天_vue_vue 高仿微信_聊天_通信
09-24
在本项目"vue-weixin-master.zip"中，开发者利用Vue.js框架...综上所述，"vue-weixin-master"项目涵盖了Vue.js的多个核心概念和技术，包括组件化、状态管理、实时通信以及用户体验设计，是提升Vue.js实战技能的好案例。
RuoYi-activitiRuoYi-activitiRuoYi-activiti
06-24
Spring-activiti是将Activiti与Spring框架集成的模块，使得在Spring环境中使用Activiti更为便捷。通过Spring的依赖注入和事务管理，可以更好地控制流程的生命周期和异常处理。同时，Spring的AOP（面向切面编程）特性...
Vue3 -- 集成sass【项目集成5】
qq_53002037的博客
11-15 912
集成scss及全局配置
Vue3中全局使用Sass变量方法
weixin_63443072的博客
03-13 699
1.首先需要在自己的静态资源目录下，放入两个sass文件。需要注意的是 .d 文件，是用来在开发的时候给予提示用的。到这里，你的任何.vue文件中的style中都能直接使用 vw、vh方法了。
Vue3使用Sass完全教程
哆啦A瑶的博客
03-05 5018
sass是css的预处理器，扩展了css语言，提供了规则、变量、混入、选择器、继承、内置函数等特性，有助于减少CSS重复的代码，节省开发时间。为了在Vue中使用sass需要安装sass-loader和sass的依赖环境node-sass和sass。直接执行下面的语句安装就行了： npm install -D node-sass sass sass-loader 如果发现报错了Syntax Error: TypeError: this.getOptions is not a function，是由于包的版本
vue3使用sass
想好了再写！
05-23 536
vue3使用scss。
vue3集成sass
希望我快乐
01-02 3966
方法一：终端创建项目 1.选择特性：Manually select features vue create vuedemo ? Please pick a preset: (Use arrow keys) > default (babel, eslint) Manually select features 2.选择创建项目的特性：CSS Pre-processors ? Check ...
vue3 使用sass变量
YUELEI118的博客
03-09 402
【代码】vue3 使用sass变量 @use。
Vue3中Sass的安装与使用指南：轻松上手CSS预处理器
在这里，我乐于倾囊相授，分享我的技术心得、项目实战经验、技术技巧。希望能够惠及更多的开发者，助力大家在技术的海洋中扬帆远航。
02-22 9888
Sass（Syntactically Awesome Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，提供了更高级的语法和特性，例如变量、嵌套、混合、继承和颜色功能等，这些特性可以帮助开发者更高效地管理和维护样式表。以前用vue-cli的时候，还要安装sass-loader、node-sass什么的，安装的时候还会遇到各种问题，但是vite其实安装sass就可以了，很简单。Sass让CSS可以使用变量。可以用更少的代码，做更多的事，用更少的时间，具有更强的可读性。Sass提供了一个!
Vue-cli3.0配置实战与注意事项
3. Router：集成Vue Router，方便构建单页面应用的路由系统。 4. Vuex：集成Vuex，用于管理应用的状态。 5. CSS Pre-processors：选择CSS预处理器，如Sass、Less或Stylus。 6. Linter/Formatter：选择代码风格检查和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值