vite 项目中如何使用Sass

作者

1.安装

npm add sass

注意：有些博客中会告诉你需要 安装sass-loader和sass，这是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.使用

详细的使用方法请参考：

参考资料

到此这篇关于vite 项目中如何使用Sass的文章就介绍到这了,更多相关vite 使用Sass内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: