最简单明了vite+ts+sass无loaders配置，利用ts读取scss文件中的变量并在App.vue中使用

做后端的，前端水平有限，最近练手，遇到了左侧菜单是展开关闭的问题，接触到了scss中定义全局变量，利用typescript读取的问题，在此记录一下

vite+ts+sass

环境：package.json中内容如下，软件版本不对，怎么弄都不对

{

{},

 "scripts": {

    "dev": "vite",

    "build": "vue-tsc && vite build",

    "preview": "vite preview"

  },

  "dependencies": {

   ……

    "sass": "^1.61.0",

   ……

    "vue": "^3.2.47",

    "vue-router": "^4.1.6",

    "vuex": "^4.0.2"

  },

  "devDependencies": {

    ……

    "@types/node": "^18.15.11",

    "@vitejs/plugin-vue": "^4.1.0",

    "typescript": "^4.9.3",

……

    "vite": "^4.2.0",

    "vue-tsc": "^1.2.0"

  }

}

1，安装：

pnpm install sass

npm install sass

2,  目录：/src文件下面新建一个styles文件，vscode下的目录变成了  /css/styles

在styles里面新建两个文件：

一个为xxx.module.scss，放sass变量值

一个文件名为xxx.module.d.ts的文件定义xxx.module.scss文件结构。

 

具体代码如下：(注意代码中的加粗部分)

styles/xxx.module.scss内容如下：（xxx是文件名，module.scss就理解成扩展名吧）

$textred:#ff0000;

$textgreen:#00ff00;

:export {

    textred:$textred;

    textgreen:$textgreen

}

styles/xxx.module.d.ts内容如下 ：（xxx是文件名，module.d.ts就理解成扩展名吧）

 

export interface stylesTypeName{

    textred:string

    textgreen:string

}

const globalStyles:stylesTypeName

export default globalStyles

下面做了一个点按钮改文本颜色的示例，和实际应用不沾边，不喜勿喷

 

App.vue中的使用：

<template>

  <span :class="color"> 颜色变量值：{{ colorValue }}</span>

  <el-button type="primary" @click="changeColor">显示色值</el-button>

  <router-view />

</template>

<script lang="ts" setup>

import { ref } from 'vue'

import b from '@/styles/xxx.module.scss'

const color = ref("textred");

const colorValue = ref(b.textred);

const changeColor = () => {

  color.value = color.value == "textred" ? "textgreen" : "textred";

  colorValue.value = color.value == "textred" ? b.textred : b.textgreen;

}

</script>

<style lang="scss">

@import "@/styles/xxx.module";//不带.scss部分

.textred {

  color: $textred

}

.textgreen {

  color: $textgreen

}

</style>