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

🦖我是Sam9029，一个前端

Sam9029的CSDN博客主页:

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

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

安装 scss :

vue3 收款定制开发好像不需要再使用 node-sass

npm i sass sass-loader --save-dev
1

安装至 开发依赖 即可

在 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";'      }    }  }})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

---

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

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

一般以 $符号 开头

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

---

在组件中使用SCSS全局变量

• 此时不需要任何的引入直接对某的元素定义相应的scss变量

<template>........</template><style>div{	/*就是如此简单*/	background-color:$color-green;}</style>
1
2
3
4
5
6
7
8
9
10
11

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

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

---

🦖我是Sam9029，一个前端

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

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

Sam9029的CSDN博客主页: