亲宝软件园·资讯

展开

vue3安装配置sass的详细步骤

Jay丶千珏 人气:0

前言:

对于前端开发人员来说,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>

 如此这样~.~!

总结

加载全部内容

相关教程
猜你喜欢
用户评论