vite: 项目中使用Sass

1.安装

powerShell 复制代码
npm add sass

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

2.配置

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

JavaScript 复制代码
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中写入以下的代码:

JavaScript 复制代码
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 - 掘金
相关推荐
星光不问赶路人1 天前
一文搞清楚 TypeScript 中 triple-slash 与 tsconfig.types 有何区别?
typescript·vite
PanZonghui3 天前
Vite 构建优化实战:从配置到落地的全方位性能提升指南
前端·react.js·vite
星光不问赶路人7 天前
Vite 中的 import.meta.glob vs 动态导入:该用哪个?
前端·vite
tuuuuuun9 天前
Stomp 订阅模块化
websocket·vite
千码君201610 天前
React Native:使用vite创建react项目并熟悉react语法
javascript·css·react native·react.js·html·vite·jsx
雪山上的小灰熊10 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
别看我只是一直狼14 天前
用模块联邦(Module Federation)优雅共享组件
vite
光影少年19 天前
vite打包优化有哪些
前端·vite·掘金·金石计划
代码小学僧20 天前
Vite 项目最简单方法解决部署后 Failed to fetch dynamically imported Error问题
前端·vue.js·vite
萌萌哒草头将军22 天前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite