下载

npm i sass-loader sass -D

只要按照了这2个包，启动项目，在<style>标签中加上 lang="scss" ,就可以用scss了，

使用

引用全局scss

方式1：

切记一定要加 !important ，否则全局样式可能不生效

方式2：

vite.config.js中配置：

export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@import "@/style/test.scss";`}}}
})

测试代码：

<template><div class="main">hello<span class="myheader"> world </span></div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
$my_red: red;
.main {font-size: 30px;.myheader {color: $my_red;background-color: yellow;border: 5px solid $color_border;}
}
</style>

vite中使用scss相关推荐

基于less和sass在webpack或vite中的动态主题的实现方案
2021-12-26更新在线动态主题的实现,比原文中提到的方案六的插件更加易用,具有如下特点: 使用成本很低跟ui框架无关,Element-ui.iview.Ant-design 等等等(只要基于 ...
如何在 vue-cli v3.0 中使用 SCSS/SASS
在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间.关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案.前提是在使用 vue-cli 生成项目时 ...
vue中使用scss
1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 ...
vue中，scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
在行内样式或对象格式的样式中使用scss变量
前言 scss可以通过$mcolor:color,设置变量,方便全局统一样式和后续修改整体风格.一般也不会写行内样式,所以用起来没什么问题.但是在使用uniapp及其第三方ui框架uview的时候,有 ...
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制
在vue3+vite中引入高德开放平台API实现边界范围多边形的绘制 1,先去高德地图开放平台申请账号注册流程不再赘述; 2,在我的应用中创建key,选择web端Js点击提交生成; 3,生成后可以看到 ...
【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量
vue3+vite项目引入SCSS及使用SCSS全局变量
vue3+vite中使用环境变量 .env 的一些配置情况说明
在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置 1.设置.env中的内容信息注意vue3+vite 必须使用VITE开头的配置信息 ...
【postcss】解决vite中使用postcss-px-to-viewport无法使用vant等多种设计尺寸问题|postcss-plugins
cnjm-postcss-px-to-viewport 基于postcss-px-to-viewport插件稍加改造的和使用postcss-px-to-viewport 是基本一样的,只是多处理了v ...

vite中使用scss

下载

使用

引用全局scss

vite中使用scss相关推荐

最新文章

热门文章