当前位置: 首页 > news >正文

Shader 阴影

阴影生成原理

在这里插入图片描述
以平行光为例,把相机移动到光源位置,计算阴影映射纹理(shadowmap),这张shadowmap本质上是一张深度图,它记录了从该光源的位置出发、能看到的场景中距离它最近的表面位置(深度信息)。渲染时中把顶点位置变换到光源空间下,得到它在光源空间中的三维位置信息。然后,我们使用xy分量对shadowmap进行采样,得到shadowmap中该位置的深度信息。如果该深度值小于该顶点的深度值(通常由z分量得到),那么说明该点位于阴影中。如图,将顶点P转换到光源空间,得到(Px, Py, Pz),Pz = 0.9,用(Px, Py)对shadowmap采样,得到C点的深度0.4,0.4 < 0.9,所以P点在阴影中

需要注意的细节

使用内置阴影的shader大致框架如下,这里略去一些不重要的部分

Shader "MyCustom/BuildinShadow"
{Properties{}SubShader{Tags { "RenderType"="Opaque" }Pass{Tags {"LightMode"="ForwardBase"}CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdbase#include "UnityCG.cginc"#include "Lighting.cginc"#include "AutoLight.cginc"struct appdata{float4 vertex : POSITION;};struct v2f{float4 pos : SV_POSITION;SHADOW_COORDS(x) //x表示第几个纹理};v2f vert (appdata v){v2f o;//...TRANSFER_SHADOW(o);return o;}fixed4 frag (v2f i) : SV_Target{//...//fixed atten = 1.0;//fixed shadow = SHADOW_ATTENUATION(i);//return fixed4(ambient + (diffuse + specular) * atten * shadow, 1.0);UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);return fixed4(ambient + (diffuse + specular) * atten, 1.0);}ENDCG}Pass{Tags {"LightMode"="ForwardAdd"}Blend One OneCGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdadd// #pragma multi_compile_fwdadd_fullshadows#include "UnityCG.cginc"#include "Lighting.cginc"#include "AutoLight.cginc"struct appdata{float4 vertex : POSITION;};struct v2f{float4 pos : SV_POSITION;SHADOW_COORDS(x) //x表示第几个纹理};v2f vert (appdata v){v2f o;//...TRANSFER_SHADOW(o);return o;}fixed4 frag (v2f i) : SV_Target{//...UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);return fixed4((diffuse + specular) * atten, 1.0);}ENDCG}// 自己实现阴影,额外添加一个Pass,这个Pass是为了更新光源的阴影映射纹理//Pass//{//    Tags {"LightMode"="ShadowCaster"}//}}Fallback "Specular"
}

在这里插入图片描述
在这里插入图片描述
需要注意的细节

  • 光源设置阴影类型,Hard Shadows或者Soft Shadows
  • 物体的Mesh Renderer上设置Cast Shadows和Receive Shadoes,Plane或一些半透明物体需要设置双面投射阴影,即Cast Shadows设置为Two Sided
  • 使用内置阴影需要在shader结尾加上 Fallback “Specular”,Specular的Fallback调用了VertexLit,VertexLit中有个Pass渲染光源的阴影映射纹理,或是摄像机的深度纹理。如果要自己实现阴影,需要额外写一个Pass,并把LightMode设置为ShadowCaster
  • Base Pass计算平行光和环境光,申明编译指令#pragma multi_compile_fwdbase,Additional Pass计算其他类型的光源,如果点光源或聚光灯也要计算阴影,需要申明编译指令#pragma multi_compile_fwdadd_fullshadows 代替 #pragma multi_compile_fwdadd
  • Additional Pass需要设置混合 Blend One One
  • 引用内置文件 #include “AutoLight.cginc”,计算阴影时所用的宏都是在这个文件中声明的
  • SHADOW_COORDS,TRANSFER_SHADOW和SHADOW_ATTENUATION这三个宏是计算阴影时的“三剑客”,SHADOW_COORDS就是声明一个用于对阴影纹理采样的坐标,TRANSFER_SHADOW将顶点从模型空间转换到光源空间后存储到_ShadowCoord中,SHADOW_ATTENUATION使用阴影坐标采样阴影贴图,也可以使用UNITY_LIGHT_ATTENUATION代替SHADOW_ATTENUATION,它用于计算光照衰减和阴影,接受3个参数,将光照衰减和阴影值相乘后的结果存储到第一个参数中,使用UNITY_LIGHT_ATTENUATION,使得Base Pass和Additional Pass的代码得以统一
  • 这些宏中会使用上下文变量来进行计算,所以变量名称需要和宏中使用的名称一致,a2v(或appdata)结构体中的顶点坐标变量名必须是vertex,顶点着色器的输入结构体a2v(或appdata)必须命名为v,v2f中的顶点位置变量必须命名为pos

完整的Shader

Shader "MyCustom/BuildinShadow"
{Properties{_MainTex            ("Texture",            2D)             = "white" {}_Diffuse            ("Diffuse",            Color)          = (0.5, 0.5, 0.5, 1)_Specular           ("Specular",           Color)          = (1, 1, 1, 1)_SpecularPower      ("SpecularPower",      Range(0, 150))  = 20_SpecularIntensity  ("SpecularIntensity",  Range(0, 10))   = 1.5}SubShader{CGINCLUDEfloat _specular(float3 worldViewDir, float3 worldLightDir, float3 worldNormal, float power, float intensity){float3 halfVector = normalize(worldLightDir + worldViewDir);float hdotn = max(0, dot(halfVector, worldNormal));float specular = pow(hdotn, power) * intensity;return specular;}ENDCGTags { "RenderType"="Opaque" }LOD 100Pass{Tags {"LightMode"="ForwardBase"}CGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdbase#include "UnityCG.cginc"#include "Lighting.cginc"#include "AutoLight.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv     : TEXCOORD0;};struct v2f{float4 pos          : SV_POSITION;float2 uv           : TEXCOORD0;float3 worldNormal  : TEXCOORD1;float3 worldPos     : TEXCOORD2;SHADOW_COORDS(3)};sampler2D _MainTex;float4 _MainTex_ST;float4 _Diffuse;float4 _Specular;float _SpecularPower;float _SpecularIntensity;v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldNormal = UnityObjectToWorldNormal(v.normal);o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;TRANSFER_SHADOW(o);return o;}fixed4 frag (v2f i) : SV_Target{float3 worldLightDir = UnityWorldSpaceLightDir(i.worldPos);float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));fixed4 texColor = tex2D(_MainTex, i.uv);fixed3 albedo = texColor.rgb * _Diffuse.rgb;// 环境光float3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;// 漫反射float3 diffuse = _LightColor0.rgb * albedo * max(0, dot(i.worldNormal, worldLightDir));// 高光float3 specular = _LightColor0.rgb * _Specular.rgb * _specular(worldViewDir, worldLightDir, i.worldNormal, _SpecularPower, _SpecularIntensity);// atten为阴影和衰减的乘积,UNITY_LIGHT_ATTENUATION针对不同类型的光源进行计算UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);float4 finalColor = 1;finalColor.rgb = ambient + (diffuse + specular) * atten;return finalColor;}ENDCG}Pass{Tags {"LightMode"="ForwardAdd"}Blend One OneCGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdadd// 其他光源使用阴影,使用下面的指令替换掉 multi_compile_fwdadd// #pragma multi_compile_fwdadd_fullshadows#include "UnityCG.cginc"#include "Lighting.cginc"#include "AutoLight.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;float2 uv     : TEXCOORD0;};struct v2f{float4 vertex       : SV_POSITION;float2 uv           : TEXCOORD0;float3 worldNormal  : TEXCOORD1;float3 worldPos     : TEXCOORD2;SHADOW_COORDS(3)};sampler2D _MainTex;float4 _MainTex_ST;float4 _Diffuse;float4 _Specular;float _SpecularPower;float _SpecularIntensity;v2f vert (appdata v){v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);o.worldNormal = UnityObjectToWorldNormal(v.normal);o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;TRANSFER_SHADOW(o);return o;}fixed4 frag (v2f i) : SV_Target{float3 worldLightDir = UnityWorldSpaceLightDir(i.worldPos);float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));// 漫反射float3 diffuse = _LightColor0.rgb * _Diffuse.rgb * max(0, dot(i.worldNormal, worldLightDir));// 高光float3 specular = _LightColor0.rgb * _Specular.rgb * _specular(worldViewDir, worldLightDir, i.worldNormal, _SpecularPower, _SpecularIntensity);UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);float4 finalColor = 1;finalColor.rgb = (diffuse + specular) * atten;return finalColor;}ENDCG}}Fallback "Specular"
}

在这里插入图片描述
通过Frame Debug观察阴影的渲染过程,UpdateDepthTexture,即更新摄像机的深度纹理;RenderShadowmap,即渲染得到平行光的阴影映射纹理;CollectShadows,即根据深度纹理和阴影映射纹理得到屏幕空间的阴影图;最后绘制渲染结果

透明物体的阴影

在这里插入图片描述

需要注意的细节

  • Tags设置 “Queue”=“AlphaTest” ,“RenderType”=“TransparentCutout”
  • Cull Off 关闭剔除
  • FallBack “Transparent/Cutout/VertexLit” 它含有透明度测试功能的ShadowCaster Pass
  • 为了保证命名统一,必须使用_Cutoff来命名透明度阈值
  • Mesh Renderer组件中的Cast Shadows属性设置为Two Sided,强制Unity在计算阴影映射纹理时计算所有面的深度信息

完整的shader

Shader "MyCustom/AlphaTestShadow" 
{Properties {_MainTex ("Main Tex",	   2D)			 = "white" {}_Color   ("Color Color", Color)			 = (1, 1, 1, 1)_Cutoff  ("Alpha Cutoff",  Range(0, 1))  = 0.5}SubShader {Tags { "Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="TransparentCutout" }Pass {Tags { "LightMode"="ForwardBase" }Cull OffCGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdbase#include "Lighting.cginc"#include "AutoLight.cginc"sampler2D _MainTex;float4 _MainTex_ST;fixed4 _Color;fixed _Cutoff;struct a2v{float4 vertex	: POSITION;float3 normal	: NORMAL;float4 uv		: TEXCOORD0;};struct v2f{float4 pos			: SV_POSITION;float3 worldNormal  : TEXCOORD0;float3 worldPos		: TEXCOORD1;float2 uv			: TEXCOORD2;SHADOW_COORDS(3)};v2f vert(a2v v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.worldNormal = UnityObjectToWorldNormal(v.normal);o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz;o.uv = TRANSFORM_TEX(v.uv, _MainTex);TRANSFER_SHADOW(o);return o;}fixed4 frag(v2f i) : SV_Target{fixed3 worldLightDir = normalize(UnityWorldSpaceLightDir(i.worldPos));fixed4 texColor = tex2D(_MainTex, i.uv);clip(texColor.a - _Cutoff);fixed3 albedo = texColor.rgb * _Color.rgb;// 环境光fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * albedo;// 漫反射fixed3 diffuse = _LightColor0.rgb * albedo * max(0, dot(i.worldNormal, worldLightDir));UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos);return fixed4(ambient + diffuse * atten, 1.0);}ENDCG}}FallBack "Transparent/Cutout/VertexLit"
}

参考

《Shader 入门精要》
查看Build-in Shaders 需要科学上网
在这里插入图片描述

相关文章:

Shader 阴影

阴影生成原理 以平行光为例&#xff0c;把相机移动到光源位置&#xff0c;计算阴影映射纹理&#xff08;shadowmap&#xff09;&#xff0c;这张shadowmap本质上是一张深度图&#xff0c;它记录了从该光源的位置出发、能看到的场景中距离它最近的表面位置&#xff08;深度信息&…...

【冲刺蓝桥杯的最后30天】day2

大家好&#x1f603;&#xff0c;我是想要慢慢变得优秀的向阳&#x1f31e;同学&#x1f468;‍&#x1f4bb;&#xff0c;断更了整整一年&#xff0c;又开始恢复CSDN更新&#xff0c;从今天开始更新备战蓝桥30天系列&#xff0c;一共30天&#xff0c;如果对你有帮助或者正在备…...

docker系列1:docker安装

传送门 docker官网地址&#xff1a; Docker: Accelerated, Containerized Application Development 安装地址&#xff1a;Install Docker Engine docker hub地址 docker hub&#xff1a;Docker 安装步骤 前置条件 由于安装docker&#xff0c;需要根据操作系统版本选择…...

内核角度谈谈Linux进程和线程

目录前言内核对进程和线程的表示创建进程的过程创建线程的过程创建进程和线程的异同揭秘 do_fork 系统调用结论前言 昨天面试的时候&#xff0c;面试官问我了个平平淡淡的问题–>“聊聊Linux中进程和线程”; 相比大家不管是在考试还是面试中或多或少都遇到过这个问题&…...

【mmdeploy部署系列】使用Tensorrt加速部署mmpose人体姿态库

【mmdeploy部署系列】使用Tensorrt加速部署mmpose人体姿态库0.引言1.安装mmcv2.使用mmpose&#xff08;1&#xff09;安装mmpose&#xff08;2&#xff09;运行mmpose3.使用mmdeploy&#xff08;1&#xff09;安装ppl.cv&#xff08;2&#xff09;编译安装mmdeploy&#xff08;…...

IDEA 每次新建工程都要重新配置 Maven 解决方案

IDEA 每次新建工程都要重新配置 Maven 解决方案 IDEA 每次新建工程都要重新配置 Maven&#xff0c;是一件相当浪费时间的事情。这是因为在创建一个项目后&#xff0c;在 File -> Settings -> Build,Execution,Deployment -> Build Tools -> Maven下配置了 Maven h…...

【C++修炼之路】25.哈希应用--布隆过滤器

每一个不曾起舞的日子都是对生命的辜负 布隆过滤器前言一.布隆过滤器提出二.布隆过滤器概念三. 布隆过滤器的操作3.1 布隆过滤器的插入3.2 布隆过滤器的查找3.3 布隆过滤器的删除四.布隆过滤器的代码4.1 HashFunc的仿函数参考4.2 BloomFilter.h五.布隆过滤器的优缺点六.布隆过滤…...

linux入门---权限

目录标题什么是权限人的分类为什么会有所属组查看文件属性文件的分类如何查看权限文件不同权限的表现rwx权限修改八进制权限修改umask有关内容文件中人的修改目录不同权限的表现rwx什么是权限 首先来看一个例子&#xff1a;比如说我没有爱奇艺的vip&#xff0c;那么我也就没有…...

Unity记录2.1-动作-多段跳、蹬墙跳、墙体滑落

文章首发及后续更新&#xff1a;https://mwhls.top/4450.html&#xff0c;无图/无目录/格式错误/更多相关请至首发页查看。 新的更新内容请到mwhls.top查看。 欢迎提出任何疑问及批评&#xff0c;非常感谢&#xff01; 汇总&#xff1a;Unity 记录 摘要&#xff1a;实现跳跃、蹬…...

Spring Boot结合IDEA自带Maven插件快速切换profile | Spring Cloud 10

一、前言 IDEA是目前 Java 开发者中使用最多的开发工具&#xff0c;它有着简约的设计风格&#xff0c;强大的集成工具&#xff0c;便利的快捷键。 在项目项目整个开发运维周期中&#xff0c;我们的的项目往往需要根据不同的环境&#xff0c;使用不同的文件配置。 比如以下部…...

ES 7.7.0 数据迁移

本文使用 elasticdump 做数据迁移&#xff0c;支持在线和离线俩种方式&#xff0c;适用于数据量比较小的情况。 1、Node 安装 由于elasticdump 依赖于 node&#xff0c;首先需要安装下node。 1.1、 Linux 安装 $ wget https://nodejs.org/dist/v10.15.0/node-v10.15.0-linu…...

【玩转c++】vector讲解和模拟底层实现

本期主题&#xff1a;vector的讲解和模拟实现博客主页&#xff1a;小峰同学分享小编的在Linux中学习到的知识和遇到的问题小编的能力有限&#xff0c;出现错误希望大家不吝赐vector的介绍及使用1.1vector的介绍vector其实就是一个数组的模板 &#xff0c;存放的数据可以改变而已…...

基本类型、包装类型、引用类型、String等作为实参传递后值会不会改变?

看了半天帖子&#xff0c;讲得乱七八糟&#xff0c;坑死了 [1] 先说结论 基本类型、包装类型、String类型作为参数传递之后&#xff0c;在方法里面修改他们的值&#xff0c;原值不会改变&#xff01;引用类型不一定&#xff0c;要看是怎么修改它的。 [2] 为什么基本类型、包装类…...

Tomcat服务器配置以及问题解决方案

文章目录01 Tomcat简介02 Tomcat的安装03 Tomcat的使用启动Tomcat服务器 &#xff08;解决一闪而过&#xff09;测试 Tomcat 是否启动Tomcat 服务器的关闭04 Tomcat的配置配置端口控制台配置&#xff08;乱码解决&#xff09;部署工程到Tomcat中01 Tomcat简介 Tomcat是一款开源…...

【Node.js】HTTP协议、HTTP的请求报文和响应报文

HTTP协议、HTTP的请求报文和响应报文HTTP协议HTTP主要特点HTTP的请求报文和响应报文请求报文请求行请求消息头空行请求体响应报文响应状态行响应消息头空行响应体总结HTTP协议 HTTP 全称为超文本传输协议&#xff0c;是用于从WWW服务器传输超文本到本地浏览器的传送协议&#…...

CodeForce 455A. Boredom

题目链接 CodeForce 455A. Boredom 思路 因为跟序列的下标无关&#xff0c;所以先对数组a排个序。那么每次选择只会影响两侧的元素。 记号 令dp[i]dp[i]dp[i]表示排序后a[1..i]a[1..i]a[1..i]能够获得的最大点数。 但是这样不足以区分是否当前元素可以被使用&#xff0c;所…...

geoserver之BlobStores使用

概述 geoserver是常用的地图服务器之一&#xff0c;除了基本的能力之外&#xff0c;也提供了很多的插件方便大家使用。在本文&#xff0c;讲述一下如何在geoserver中使用BlobStores和gwc-sqlite-plugin插件实现地图的切片和部署。 BlobStores简介 在geoserver中&#xff0c;…...

跨域问题以及Ajax和Axios的区别

文章目录1. 同源策略2. 同源策略案例3. 什么是跨域4. 跨域解决方法4.1 Ajax的jsonp4.2 CORS方式4.3 Nginx 反向代理5. Axios 和 Ajax 的区别6. Axios 和 Ajax 的区别及优缺点6.1 Ajax&#xff1a;6.1.1 什么是Ajax6.1.2 Ajax的原理6.1.3 核心对象6.1.4 Ajax优缺点6.1.4.1 优点&…...

现代卷积神经网络(AlexNet)

专栏&#xff1a;神经网络复现目录 本章介绍的是现代神经网络的结构和复现&#xff0c;包括深度卷积神经网络&#xff08;AlexNet&#xff09;&#xff0c;VGG&#xff0c;NiN&#xff0c;GoogleNet&#xff0c;残差网络&#xff08;ResNet&#xff09;&#xff0c;稠密连接网络…...

单向非循环链表

1、顺序表遗留问题 1. 中间/头部的插入删除&#xff0c;时间复杂度为O(N) 2. 增容需要申请新空间&#xff0c;使用malloc、realloc等函数拷贝数据&#xff0c;释放旧空间。会有不小的消耗。 3. 当我们以2倍速度增容时&#xff0c;势必会有一定的空间浪费。例如当前容量为100&a…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...