vite: 项目中使用Sass

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 - 掘金
  • 7
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值