Vite——如何配置使用sass

简介: Vite——如何配置使用sass

前言

如果只是纯粹的使用其实并不需要配置,只需要安装对应的处理器依赖即可👍,如果需要做全局的配置可以查看css预处理选项配置

文档: css预处理器 | css预处理选项配置

内容

vite 提供了对 .scss, .sass, .less, .styl.stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件,但必须安装相应的预处理器依赖:

# .scss and .sass
npm add -D sass
# .less
npm add -D less
# .styl and .stylus
npm add -D stylus

如果使用的是单文件组件,可以通过 <style lang="sass">(或其他预处理器)自动开启。

学无止境,谦卑而行.

目录
相关文章
|
缓存 JavaScript 前端开发
【axios】二次封装——避免重复发送请求
【axios】二次封装——避免重复发送请求
809 0
【axios】二次封装——避免重复发送请求
|
12月前
|
前端开发 JavaScript
怎么在vite项目中全局导入一个scss文件
在Vite项目中全局导入SCSS文件的方法:通过配置`vite.config.js`中的`css.preprocessorOptions.scss.additionalData`属性,可以将SCSS变量或混合内容全局引入。此方法同样适用于LESS文件。详情参见Vite官方文档。
709 1
怎么在vite项目中全局导入一个scss文件
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
前端开发 开发者 容器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
Vue3中Sass的安装与使用指南:轻松上手CSS预处理器
1082 0
|
前端开发 JavaScript 编译器
Vite中预处理器(如less)的配置
【8月更文挑战第2天】Vite中预处理器(如less)的配置
1362 4
|
前端开发 JavaScript
vite中如何更优雅的使用css
【8月更文挑战第2天】webpack中,我们需要在项目中安装css-loader才能让webpack识别css文件。vue-cli基于webpack,内置了这个loader ,Vite天生就是支持对CSS文件的直接处理的。
517 5
vite中如何更优雅的使用css
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
本文讨论了在配置Vite项目时遇到的`vite.defineConfig is not defined`错误,这通常是由于缺少必要的导入语句导致的。文章还涉及了如何创建最新版本的Vite项目以及如何处理`configEnv is not defined`的问题。
775 3
vite.config.js中vite.defineConfig is not defined以及创建最新版本的vite项目
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
915 1
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
Vue3使用hook封装常见的几种异步请求函数场景,让开发更加丝滑🚀🚀🚀
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
942 1