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

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主

**🐱‍🐉🐱‍🐉恭喜你，若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！👍**

在vite初始化的项目中安装scss，及scss的使用_m0_63466615的博客-CSDN博客_vite安装scss

vue3 + vite 中使用 scss_最后一行代码下班的博客-CSDN博客_vite vue3 使用scss

场景：vue3+vite项目引入SCSS—安装

安装 scss:

vue3 好像不需要再使用 node-sass

npm i sass sass-loader --save-dev

安装至 开发依赖 即可

在 vite.config.js 中配置 scss 的全局变量 使用

需要在 项目 文件中 先 创建 全局变量 文件

目录为：@/assets/style/mixin.scss

@ 指的 src文件夹

当然关于新建一个文件来存储所有的SCSS 定义的变量值，是一种方式，但是就目前来所说，我直接在VUE组件文件style中直接定义$变量的方式，反而使得我的开发效率更加的高效

所以才上手的时候，推荐可以直接写在vue文件中定义scss变量（注意这样就不能给其他组件使用，虽然违背了scss的初衷，但是能够快速的成长，拥有全局视野这样的野路子也可被接受）

若直接在 vue 文件中定义使用，下面的css{....}的部分其实就可以不用写了

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";'}}}})

诚然，为了快速的上手scss，使用vue直接定义scss的方式的却简便，但是不代表不去学习规范的全局scss变量使用方式

在mixin.scss 文件中写入全局变量

一般以 $符号 开头

$color-green: #0f0;$color-green: #f55 !default;

在组件中使用SCSS全局变量

<template>........</template><style>div{/*就是如此简单*/background-color:$color-green;}</style>

若没有在 vite.config.js 中配置 则需要单独引入

<style>/* 根据自己的 项目 文件 来写路劲，此处为示意例子 */@import '../../assets/style/mixin.scss'</style>

🦖我是Sam9029，一个前端

文章若有错误，敬请指正🙏

**🐱‍🐉🐱‍🐉恭喜你，都看到这了，求收藏，求评论，求一个大大的赞👍！不过分吧**

Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-JS学习,CSS学习,Vue-2领域博主