【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量

【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量

一、引入sass

npm i sass sass-loader --save-dev

二、在 vite.config.js 中配置 scss 的全局变量 ,如variables.scss

export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  css:{
    preprocessorOptions:{
      scss:{
        additionalData:`
        @use "@/styles/variables.scss" as *;
        `
      }
    }
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

就可以直接使用variables.scss里面的样式了，如variables.scss下面定义了$navbar-height

$navbar-height:56px;

在home.vue中去使用$navbar-height，如下：

<style scoped lang="scss">
.page-header{
    height: $navbar-height;
    background-color: red;

}
</style>