vite+vue3中使用scss

  1. 安装scss
    npm install sass --save
  2. 在vite.config.ts中进行配置
import { fileURLToPath, URL } from 'node:url'

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      //define global scss variable
      scss: {
        additionalData: `@import "@/assets/mixin.scss";`
      }
    }
  }
})
  1. 在mixin.scss中定义一个变量
$color: red;
  1. 在路由中使用
<style scoped lang="scss">
  .login {
    width: 200px;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
   // 这里就引入了全局的scss变量 $color
    background: $color;
    button {
      margin-top: 10px;
    }
  }
  
</style>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容