vite中使用scss_vite scss

下载

npm i sass-loader sass -D

只要按照了这2个包，启动项目，在<style>标签中加上 lang="scss" ,就可以用scss了， 

使用

引用全局scss

方式1：

切记一定要加 !important  ，否则全局样式可能不生效

 方式2： 

 vite.config.js中配置： 

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/style/test.scss";`
      }
    }
  }
})

测试代码： 

<template>
  <div class="main">
    hello
    <span class="myheader"> world </span>
  </div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
$my_red: red;
.main {
  font-size: 30px;
  .myheader {
    color: $my_red;
    background-color: yellow;
    border: 5px solid $color_border;
  }
}
</style>