vue3：安装配置sass

Posted 2023-04-05 Jay丶萧邦

目录

前言：

1. 安装sass

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

3. main.ts 

4. vite.config.ts

5. Test.vue

---

前言：

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

 如此这样~.~！

vue-cli 如何配置sass

第一步：安装对应的node模块

npm install node-sass --save-dev
npm install sass-loader --save-dev

第二步：在webpack.base.config.js文件中对loaders规则 进行如下配置

{
        test:/\.scss/,
        loader:["style","css","sass"]
      }

第三步：在视图或者组件中所需要的地方添加style标签如下

<style lang="scss" scoped>
 /*样式代码*/
</style>

注明：scoped是让样式只在当前组件或者视图中起作用的