位置: IT常识 - 正文
vue3：安装配置sass(vue3 安装)
编辑：rootadmin目录
前言：
1. 安装sass
2. 新建style目录，存放scss文件
3. main.ts
4. vite.config.ts
5. Test.vue
前言：
推荐整理分享vue3：安装配置sass(vue3 安装)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vuecli3安装,vuecli3安装,vue安装环境配置,vue安装使用,vue3 安装,vue3.0安装步骤,vue3 安装,vue3 安装,内容如对您有帮助，希望把文章链接给更多的朋友！
对于前端开发人员来说，css预处理的语言已经是家常便饭了，如sass，less等等，那么在vue3中该如何去使用sass呢?
首先看个最基础的页面，木有任何的样式，接下来将一步一步的添加样式！
<template> <div> 123456 </div></template>1. 安装sassnpm install sass2. 新建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>如此这样~.~！
上一篇：基于MATLAB的随机森林分类(基于matlab的随机森林回归和交叉验证)
下一篇：ICLR2023《Crossformer: Transformer Utilizing Cross-Dimension Dependency for Multivariate Time Series》
