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

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全局变量

• 此时不需要任何的引入直接对某的元素定义相应的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领域博主