vue3安装配置sass的详细步骤

更新时间：2022年12月28日 09:15:30 作者：Jay丶千珏

sass是css的预处理器,扩展了css语言,提供了规则、变量、混入、选择器、继承、内置函数等特性,有助于减少CSS重复的代码,节省开发时间,下面这篇文章主要给大家介绍了关于vue3安装配置sass的相关资料,需要的朋友可以参考下

前言：

对于前端开发人员来说，css预处理的语言已经是家常便饭了，如sass，less等等，那么在vue3中该如何去使用sass呢?

首先看个最基础的页面，木有任何的样式，接下来将一步一步的添加样式！

<template>
  <div>
    123456
  </div>
</template>

1. 安装sass

npm install sass

2. 新建style目录，存放scss文件

项目src文件下，新建styles目录，当然位置自己随意定，新建了这三个scss文件，下面我们对这三个文件进行一一解析。

constant.scss：用于放置项目中的sass变量，比如主题颜色，大字体的字号，小字体的字号等等，这里只是用于测试

$color-red: #ff0000;
$large-size: 40px;
$font-oblique: oblique;

index.scss：用于放置项目中自己封装的一些常用的样式，class类名，比如flex布局，定位，字体等等，这个只写了一个

@import "./constant.scss";
 
.l-size {
  font-size: $large-size;
}

variables.module.scss：用于scss变量的导出，大部分用于vue文件中js中使用

@import "./constant.scss";
 
:export {
  fontOblique: $font-oblique;
}

3. main.ts

将我们封装的公共的css样式类名导入进main.ts文件中，这样在所有的vue文件中，就可以随意使用这些样式了

尝试一下~.~

<template>
  <div class="l-size">
    123456
  </div>
</template>

4. vite.config.ts

主要用途是将我们的constant.scss中的scss常量加载到全局，这样我们可以在style标签中，随意使用这些scss常量

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path';
 
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        // Vite路径别名配置
        alias: {
            '@': path.resolve('./src')
        }
    },
    /*主要看下面这段*/
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: '@import "@/styles/constant.scss";'
            }
        }
    }
})

尝试一下~.~

<template>
  <div class="l-size content">
    123456
  </div>
</template>
 
<style lang="scss" scoped>
.content {
  color: $color-red;
}
</style>

5. Test.vue

接下来，我们将 variables.module.scss中的变量导入到当前的vue文件中。

<script lang="ts" setup>
import variables from "@/styles/variables.module.scss"
 
console.log(variables)
</script>

于是我们可以这么写

<template>
  <div class="l-size content" :style="{fontStyle:variables.fontOblique}">
    123456
  </div>
</template>
 
<script setup lang="ts">
import variables from "../styles/variables.module.scss"
 
console.log(variables)
</script>
 
<style lang="scss" scoped>
.content {
  color: $color-red;
}
</style>

或者利用computed

<template>
  <div class="l-size content" :style="getStyle">
    123456
  </div>
</template>
 
<script setup lang="ts">
import {computed} from "vue"
import variables from "../styles/variables.module.scss"
 
const getStyle = computed(() => ({fontStyle: variables.fontOblique}))
</script>
 
<style lang="scss" scoped>
.content {
  color: $color-red;
}
</style>

如此这样~.~！

总结

到此这篇关于vue3安装配置sass的文章就介绍到这了,更多相关vue3安装配置sass内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

解决vue 绑定对象内点击事件失效问题
今天小编就为大家分享一篇解决vue 绑定对象内点击事件失效问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue路由守卫及页面登录权限控制的设置方法(两种)
这篇文章主要介绍了Vue路由守卫及页面登录权限控制的设置方法,本文通过实例代码通过两种方法给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-03-03
Vue3 Transition组件给页面切换并加上动画效果
这篇文章主要给大家介绍了关于Vue3 Transition组件给页面切换并加上动画效果的相关资料,vue的过渡动画主要是transition标签的使用,配合css动画实现的,需要的朋友可以参考下
2023-06-06
vue路由切换之淡入淡出的简单实现
今天小编就为大家分享一篇vue路由切换之淡入淡出的简单实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue使用echarts可视化组件的方法
这篇文章主要介绍了Vue使用echarts可视化组件的方法,本文通过实例代码案例给大家详细介绍，需要的朋友可以参考下
2021-07-07
vue+elementUI封装一个根据后端变化的动态table(完整代码)
这篇文章主要介绍了vue+elementUI,封装一个根据后端变化的动态table,实现了自动生成和插槽两个方式，主要把el-table 和el-pagination封装在一起，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-08-08
vue input标签通用指令校验的实现
这篇文章主要介绍了vue input标签通用指令校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
vue权限问题的完美解决方案
今天来说说权限管理，因为网上已经有很多关于这方面的很多内容，下面这篇文章主要给大家介绍了关于vue权限问题的完美解决方案，需要的朋友们下面来一起学习学习吧
2019-05-05
利用Vue+intro.js实现页面新手引导流程功能
在同学们使用某些网站的新版本页面的时候,经常会出现一个类似于新手引导一样的效果,来帮助同学们更好的熟悉新版本页面的功能和使用,这篇文章主要给大家介绍了关于如何利用Vue+intro.js实现页面新手引导流程功能的相关资料,需要的朋友可以参考下
2023-11-11
vue-cli项目优化方法- 缩短首屏加载时间
这篇文章主要介绍了vue-cli项目优化缩短首屏加载时间,需要的朋友可以参考下
2018-04-04