vite 项目中如何使用Sass
作者：Carlos_sam
Vite默认集成了对Sass的支持,你只需要安装Sass本身即可,这篇文章主要介绍了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.使用
详细的使用方法请参考：Sass: Sass Basics
参考资料
到此这篇关于vite 项目中如何使用Sass的文章就介绍到这了,更多相关vite 使用Sass内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！