vite: 项目中使用Sass

news/2024/11/20 10:26:38/

1.安装

npm add sass

注意:有些博客中会告诉你需要 安装sass-loadersass,这是webpack项目中的做法。而在Vite环境中,如果你想使用Sass预处理器,实际上并不需要单独安装sass-loader。Vite默认集成了对Sass的支持,你只需要安装Sass本身即可。

2.配置

在许多博客中都会告诉你要在vite.config.js中进行这样的配置:

export default defineConfig({//...css: {// css预处理器preprocessorOptions: {scss: {// 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了// 给导入的路径最后加上 ; additionalData: '@import "@/assets/style/mixin.scss";'}}}})

这么做的目的是全局引入样式 (就是这部分additionalData: '@import "@/assets/style/mixin.scss";')

它其实等同于在main.js中写入以下的代码:

import { createApp } from 'vue'
import App from './App.vue'
import "@/assets/style/mixin.scss"createApp(App).mount('#app')

3.使用

详细的使用方法请参考:Sass: Sass Basics

参考资料

  1. 在Vite中配置SCSS全局变量及可能的坑_vite 配置scss-CSDN博客
  2. 在vite初始化的项目中安装scss,及scss的使用_vite scss-CSDN博客
  3. Vite + Vue3项目添加sass - 掘金sass - 掘金">

http://www.ppmy.cn/news/1443621.html

相关文章

「PHP系列」PHP Error(错误处理)讲解

文章目录 一、使用 die() 函数,处理错误二、自定义错误处理器三、错误报告级别四、异常处理五、错误日志1. 配置 PHP 错误日志2. 记录错误到日志3. 案例代码 六、相关链接 一、使用 die() 函数,处理错误 在 PHP 中,die() 函数是一个简单而直…

基于springboot的明星周边产品销售网站源码数据库

基于springboot的明星周边产品销售网站源码数据库 随着信息互联网信息的飞速发展,无纸化作业变成了一种趋势,针对这个问题开发一个专门适应洗衣店业务新的交流形式的网站。本文介绍了星之语明星周边产品销售网站的开发全过程。通过分析企业对于星之语明…

强化SSH服务安全的最佳实践

SSH(Secure Shell)作为一种广泛应用于Linux和其他类Unix系统中的强大工具,为管理员提供了安全的远程登录和命令执行功能。在现今高度互联的网络环境中,确保SSH服务的安全性显得尤为重要。本文将详细阐述一系列SSH服务的最佳实践&a…

Golang基础8-go语言依赖管理

go语言依赖管理 探索 GO 项目依赖包管理与Go Module常规操作 - 知乎 https://juejin.cn/post/7054513615625256996 演进过程: GOPATH机制 早期引入GOPATH机制,Go 编译器可以在本地 GOPATH 环境变量配置的路径下,搜寻 Go 程序依赖的第三方…

C++--模板

1、非类型模板参数 模板参数分类类型形参与非类型形参。 类型形参即:出现在模板参数列表中,跟在class或者typename之类的参数类型名称。 非类型形参,就是用一个常量作为类(函数)模板的一个参数,在类(函数)模板中可将该参数当成常量…

苍穹外卖day8(2)用户下单、微信支付

文章目录 前言一、用户下单1. 业务流程2. 接口设计3. 数据库设计3.1 订单表orders3.2 订单明细表 order_detail 4. 代码实现 二、订单支付 前言 用户下单 因为订单信息中包含了其他业务中的数据,在逻辑处理中涉及了多个其他业务,比如要判断地址簿、购物…

Java SE入门及基础(50) Java实现LinkedList(单向链表、双向链表) Java实现栈

目录 List 接口 1. 特性描述 List 接口常用方法 2. ArrayList 示例及源码解读 3. LinkedList 示例及源码解读 单向链表 双向链表 4. 栈 练习 Java SE文章参考:Java SE入门及基础知识合集-CSDN博客 List 接口 1. 特性描述 A List is an ordered Collection (sometimes called…

unity游戏

unity游戏 unity游戏逆向主要可以分成两类,dll游戏和libil2cpp游戏,也有apk的。一般为c#编写 一般用dnspy反编译data文件夹中的Assembly-CSharp D:\ctf附件\attachment\BJD hamburger competition_Data\Managed [BJDCTF2020]BJD hamburger competitio…