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