Vue3+Vite中使用SCSS

最新推荐文章于 2025-03-28 17:18:21 发布

hpz1223

最新推荐文章于 2025-03-28 17:18:21 发布

阅读量7.9k

点赞数 17

分类专栏： Vue #CSS系列文章标签： scss 前端 css

本文链接：https://blog.csdn.net/qq_54140719/article/details/136480912

版权

#CSS系列同时被 2 个专栏收录

6 篇文章

订阅专栏

Vue

5 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装和使用SCSS，包括全局配置SCSS变量的方法，以及在不配置全局时如何单独引入变量。详细步骤涉及在vite.config.js中添加预处理器选项和使用@import引入全局变量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、安装SCSS

在创建好Vue项目后，在项目路径中打开命令行输入以下命令：

npm i sass sass-loader --save-dev

二、使用SCSS

安装完成后便可以在项目中使用SCSS，需要在style标签中设置lang属性为scss如：

<style scoped lang="scss">

三、配置SCSS全局共享变量

1.配置全局

scss中我们可以自定义变量，一些变量往往是全局共享的，为了方便我们可以在vite.config.js中defineConfig里面添加配置如下：

(需要自己新建一个存放共享的变量的文件如：mixin.scss)

  css: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "@/assets/style/mixin.scss";'
      }
    }
  }

完整代码(不清楚的小伙伴可以对照以下代码放置)：

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: {
    // css预处理器
    preprocessorOptions: {
      scss: {
        // 引入 mixin.scss 这样就可以在全局中使用 mixin.scss中预定义的变量了
        // 给导入的路径最后加上 ; 
        additionalData: '@import "@/assets/style/mixin.scss";'
      }
    }
  }
})

其中

@import "@/assets/style/mixin.scss";

为自己定义的scss全局变量文件的所在位置，一般我们将他放置在如上的位置，建好文件后我们使用 '$' 来定义变量(这里定义了一个颜色变量)：

$color-main: rgb(70, 227, 238)

然后在项目需要的地方就可以使用：

li {
  color: $color-main;
}

2.不配置全局，单独引入

如果不配置则需要单独引入变量所在文件，使用@import

<style scoped lang="scss">
@import '../../assets/style/mixin.scss'

</style>