vue3:安装配置sass

这篇具有很好参考价值的文章主要介绍了vue3:安装配置sass。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

前言:

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>

vue3:安装配置sass 

 

1. 安装sass

npm install sass

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

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

vue3:安装配置sass

 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文件中,就可以随意使用这些样式了

vue3:安装配置sass

 尝试一下~.~

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

vue3:安装配置sass

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>

vue3:安装配置sass

5. Test.vue

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

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

console.log(variables)
</script>

vue3:安装配置sass

 于是我们可以这么写

<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

 如此这样~.~!文章来源地址https://www.toymoban.com/news/detail-406814.html

到了这里,关于vue3:安装配置sass的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3之vite创建h5项目之2 (sass公共样式、声明组件、路由配置和layout组件 )

    pnpm i -D sass 1-1-1 main.ts 引入公共样式方式 1-3-1 src / style / index.scss ( 适配iphonex等还有引入其他公共的样式 ) 1-3-2 src / style / mixin.scss ( 公共样式方法抽离 ) 1-3-3 src / style / reset.scss ( 重置样式 ) 1-3-4 src / style / variables.scss ( 定义的公共变量样式 ) 1-3-5 使用变量 3-1 路径文件

    2024年02月05日
    浏览(53)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

    在项目开发中,我们经常会使用一些工具函数,也经常会用到例如 loadsh 等工具库,但是这些工具库的体积往往比较大,如果项目本身已经引入了这些工具库,那么我们就没有必要再引入一次,所以我们需要自己封装一些工具函数,来简化我们的开发。 在 src/utils 目录下创建

    2024年02月20日
    浏览(62)
  • nginx vue2+webpack 和 vue3+vite 配置二级目录访问

    我们开发中会遇到这样的需求,让我们用服务器nginx部署一个用域名的二级目录来访问项目 https:xxx/二级目录/ 来放访问项目 目录 思路 1、nginx配置(vue2 和 vue3配置的nginx相同) 2、vue2+webpack的配置 (1)vue.config.js配置 (2)router配置 3、vue3+vite的配置 (1)vite.config.js配置 (

    2024年02月09日
    浏览(58)
  • 【vue3】数据绑定,动态渲染class与style

    数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式(style)。因为 class 和 style 都是 attribute,我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是,在处理比较 复杂的绑定 时,通过拼接生成字符串是麻烦且易出错的。因此,Vue 专门为

    2024年02月13日
    浏览(42)
  • vue3前端excel导出;组件表格,自定义表格导出;Vue3 + xlsx + xlsx-style

    当画面有自定义的表格或者样式过于复杂的表格时,导出功能可以由前端实现 1. 使用的插件 : sheet.js-xlsx 文档地址:https://docs.sheetjs.com/ 中文地址:https://geekdaxue.co/read/SheetJS-docs-zh/README.md xlsx-style:https://www.npmjs.com/package/xlsx-style 2. 安装引用 安装插件-vue3 引用插件 3. 组件表格

    2024年04月26日
    浏览(39)
  • 解决Vue3+Vite3 打包部署到nginx后配置非根目录刷新页面报错空白

    报错内容 解决方法 router文件 vite.config.ts nginx.conf 配置中路径apps是我自建的存放前端页面的文件夹 起关键作用的是 try_files $uri $uri/ /demo/index.html ,当然上面项目文件夹demo也需保持一致 alias 后面的路径是Vue项目打包后dist静态文件服务器存放路径,一般在nginx下面建一个文件夹

    2024年02月11日
    浏览(59)
  • vue3.2+vite+vant4+sass搭建笔记

    官方下载地址:https://github.com/coreybutler/nvm-windows/releases 双击安装                    在  vite.config.js  文件中配置插件  tips:函数组件样式有异常,在main.js中引入vant样式 1、安装插件 postcss-pxtorem 是一款 PostCSS 插件,用于将 px 单位转化为 rem 单位 lib-flexible 用于设置 rem 基

    2024年02月02日
    浏览(50)
  • vue2和vue3关于class类的绑定以及style的绑定的区别

    本篇为个人笔记 例如:单个类绑定 多个类绑定:   例如:单个绑定  多个绑定

    2024年02月16日
    浏览(43)
  • 当vue3 报错 Cannot read properties of null (reading ‘style‘)

    当你在编写代码时 发现页面不及时刷新了 浏览器控制台报下面的错误 时刚看到的时候会一很懵 那么原因是什么呢 原因是:尽管Vue 3允许一个组件模板中存在多个元素,但是如果你这样写,有时会出现上述错误。 解决方法:在模板内你写的多个标签外面包裹一层元素,或者

    2024年02月12日
    浏览(51)
  • 毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言

    资源链接:https://download.csdn.net/download/m0_46573428/87796553 前言:毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前言_人工智能技术小白修炼手册的博客-CSDN博客 首页与导航:毕业设计:Vue3+FastApi+Python+Neo4j实现主题知识图谱网页应用——前端:首页与导航栏_人工智

    2024年02月14日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包