vite使用sass最简单教程

安装

$ npm install sass sass-loader

配置文件 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  // 插件
  plugins: [vue()],
  // 配置别名
  resolve: {
    alias: [
      { 
        find: '@', 
        replacement: resolve(__dirname, 'src') 
      }
    ],
  },
  // css预处理器
  css:{
    preprocessorOptions:{
      scss: {
        additionalData: `@import "@/assets/styles/base.scss";`,
      }
    }
  },
  // server
  server: {
    host: '0.0.0.0',
    port: 8080,
    open:true
  }
})

base.scss 文件

// 全局变量
$mainColor: #4874BF;
$bgColor: #F8F8F8;
$txtColor: #ff0000;
$subColor: #7f7f7f;

按需加载

//按需引入并使用
<style scoped lang="scss">
@import '@/assets/styles/common.scss';
.test{
  width: 650px;
  height: 60px;
  font-size: $font-size-normal;
  background-color: $bg-color;
  @include box-shadow;
}
</style>