vue2和vue3使用less和scss

文章目录Vue 2 中使用 Less 和 SCSS一、安装依赖二、配置 vue.config.js三、在 .vue 文件中使用Vue 3 中使用 Less 和 SCSS一、安装依赖二、配置 vite.config.js三、在 .vue 文件中使用Vue 2和Vue 3使用差异样式穿透less、scss语法1、变量2、运算3、注释4、嵌套5、混入(Mixin)6、函数7、继承8、if-else、for、while、each9、导入10、作用域Vue 2 中使用 Less 和 SCSSVue 2 项目通常基于 ‌Vue CLI‌ 构建其内部封装了 Webpack因此配置预处理器需通过 vue.config.js 文件进行一、安装依赖# 安装 SCSS 支持npminstallsass sass-loader --save-dev# 安装 Less 支持npminstalllessless-loader --save-dev二、配置 vue.config.jsmodule.exports{css:{loaderOptions:{sass:{additionalData:import /styles/variables.scss;// 全局导入变量},less:{additionalData:import /styles/variables.less;}}}}三、在 .vue 文件中使用stylelangscss.container{color:$primary-color;// 引用全局变量background:lighten($secondary-color,10%);}/stylestylelangless.header{font-size:font-size-large;}/styleVue 3 中使用 Less 和 SCSSVue 3 推荐使用 ‌Vite‌ 作为构建工具其配置更轻量、响应更快且直接基于原生 ES 模块无需 Webpack 复杂配置。一、安装依赖# SCSSnpminstallsass-D# Lessnpminstallless-D二、配置 vite.config.jsimport{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({plugins:[vue()],css:{preprocessorOptions:{scss:{additionalData:import /styles/variables.scss;},less:{additionalData:import /styles/variables.less;}}}})三、在 .vue 文件中使用与 Vue 2 完全一致Vue 2和Vue 3使用差异维度Vue 2 (Vue CLI)Vue 3 (Vite)构建工具WebpackVite预处理器依赖sass-loader sass仅 sass / less配置文件vue.config.jsvite.config.js配置路径css.loaderOptionscss.preprocessorOptions性能较慢打包时间长极快热更新秒级全局变量导入支持但需手动配置支持更稳定社区支持逐渐减少官方停止维护官方主力推荐样式穿透常见使用场景修改第三方组件样式修改子组件内部元素样式覆盖默认主题样式样式穿透vue2使用 操作符使用 /deep/使用 ::v-deepvue3:deep():slotted()修改插槽样式:global()添加全局样式Vue2 中的样式穿透!-- 1. 使用 操作符 --stylescoped.parent .child{color:red;}/style!-- 2. 使用 /deep/ --stylescoped.parent /deep/ .child{color:red;}/style!-- 3. 使用 ::v-deep --stylescoped.parent ::v-deep .child{color:red;}/styleVue3 中的样式穿透stylescoped/* 方式1直接作用于子元素推荐写法 */:deep(.child){color:red;}/* 方式2从父元素开始 */.parent :deep(.child){color:red;}/* 多层级选择器 */.parent{:deep(.level-1){.level-2{.level-3{color:blue;}}}}/* 修改插槽内容的样式 */:slotted(.slot-class){color:red;}:global(.global-class){color:blue;}/styleless、scss语法1、变量变量声明用写法width: 10px;变量声明用$写法$width: 10px;//lesswidth:10px;width:width;//scss $width:10px;width:$width;2、运算less、scss用法同var:50vh/2;width:calc(50% (var- 20px));3、注释less、scss用法同/* 一个块注释源文件与编译后正常默认文件都保留。 * style comment! */var:red;// 这一行被注释掉了仅保留源文件中var:white;4、嵌套less、scss用法同#header{color:black;width:600px;.logo{width:300px;}:after{content: ;display:block;font-size:0;height:0;clear:both;visibility:hidden;}-bottom{background-image:url(header-bottom.png);}}5、混入(Mixin)less直接在要混入的元素中调用scss使用mixin注册include调用// Less // .bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。 // 注意你也可以使用 #ids 作为 mixin 使用。 .bordered{border-top:dotted 1px black;border-bottom:solid 2px black;}#menu a{color:#111;.bordered();}.post a{color:red;.bordered();}/* ------------------------------ */// Sassmixinbordered{border-top:dotted 1px black;border-bottom:solid 2px black;}#menu a{color:#111;includebordered;}.post a{color:red;includebordered;}6、函数// Less .test(a,b){width:ab;}my-radius:10px;.border_radius(v,h,radius:my-radius){box-{v}-{h}-radius:my-radius;}.good{.test(20px,30px);.border_radius(top,left);.border_radius(bottom,right,5px);width:width;}/* ------------------------------ */// Sassfunctiondouble($n){return$n * 2;}#sidebar{width:double(5px);}7、继承// Less nav ul{:extend(.inline);background:blue;}.inline{color:red;}//scss .class1{border:1px solid #ddd;}.class-sub{extend.class1;font-size:120%;}8、if-else、for、while、eachless// if-else .max(foo)when(foo 0){width:foo;}.mixin(foo)when(default()){width:0;}.max(10px);// 编译后 .max{width:10px;}//循环loop(counter)when(counter 0){// 递归调用自身 .loop(counter- 1);// 每次调用时产生的样式代码width:(10px - *counter);}.container{// 调用循环 .loop(5);}// 编译后 .container{width:10px;width:20px;width:30px;width:40px;width:50px;}scss//if-else $color:red;p{color:$color;if$color red{background-color:#000;}else{background-color:#fff;}}//for、while、eachfor$i from 1 to 10{.border-#{$i}{border: #{$i}px solid blue;}}$i:6;while$i 0{.item-#{$i}{width:2em * $i;}$i:$i - 2;}each$member in a,b,c,d{.#{$member}{background-image:url(/image/#{$member}.jpg);}}9、导入// Lessimportlibrary;// .less 可以省略后缀importtest.css;//scssimportfoo.scss;importfoo.css;10、作用域变量继承先在本地找变量没有则从父级继承使用说明不用事先声明变量同一作用域内可随时随地定义变量因为会找整个本地作用域优先查找同作用域下变量子作用域可访问父作用域变量反之不行