13-在Vite中使用CSS原创

我们来继续的学习的功能。这一张我们来看一下在V中如何使用CSS，其实V原生就支持CSS，我们来演示一下。回到我们VI3的这个项目，我们在app.jss里边打算引入一个样式，我们可以给这个字符串加点颜色。我们可以在access里边创建一个新的文件夹，取名为styles，在这个文件夹下面我们再创建一个新的文件，叫做hello。点CSS，我们可以写一个CSS代码，比方说我们写一个class.title里边呢，我们可以写个color red，然后我们在APP的GSS里边去引入这个样式，我们可以通过一个模块导入的方法来导入我们当前目录下面的sets下面的styles下的hello.css这样的话我们就可以在我们当前的组件里边去使用我们在CSS里边定义的样式了。比方说我们在div上面定义一个class，我们可以把刚才我们定义好的title放进去保存一下，那么大家看到我们这个页面的文字的颜色就变成了红色。

大家也发现了，我们在控制台上面显示的是HR update，也就是说我们这个样式的更新是所谓的热更新的。比方说现在我们把hello.css里的这个文字的颜色，比方说改成叫做blue，好保存一下，大家发现文字的颜色迅速的变成了蓝色，而且速度非常的快，那可见呢，它也秉承了我们V这种高速啊，局部刷新的这样的特性。另外我们在wait中可以使用原生的CSS里的variables，也就是变量，这个功能呢，是浏览器自带的，如果浏览器不支持的话呢，Wait会使用post CSS优雅的进行降级，我们可以打开所谓的MDN的官网来看一下这个CSS的属性的定义，那么基本的使用方法呢，就是我们可以定义一个元素，然后呢，可以通过冒号route来去定义一个根的这样的一个变量，然后呢，我们就可以在element里边去通过va来去执行一个函数，把我们的变量放进去，就像我们使用CSS里的预处理呃这样的工具，像CSS呀，Less呀等等这样的一些功能了，不过呢，这个功能还不是很完善，我们只是去读取一些变量而已，不过呢，它已经能够呃，可以在浏览器原生的去支持类似于我们预处理的一些功能了，我们可以去呃，在V里面使用一下。

回到我们代码，我们可以在hello.css里边去编写一个所谓的CSS variables，我们通过冒号root这个所谓的伪元素，然后去定义一个杠杠开头的一个变量，比方说我们定义一个man BG color，我们可以把它定义成所谓的叫做yellow。

接下来呢，我们就可以在任何的地方去使用这个变量了，比方说我们可以给title加一个background color，那它的颜色呢，就等于我们Y，然后后边呢，我们可以写入一个杠杠慢b color保存一下，这样的话，我们看到当前的这个div就产生了这样的一个黄色的背景。Wait已经集成了post CSS，我们来看一下wait的官方网站关于post CSS的介绍，如果我们项目中包含有效的post CSS配置，也就是任何时候post CSS load conflict支持的这种格式，比如我们在项目的game下面创建一个post css.com GS，那么它将会自动的应用于我们所有已导入的CSS。你想去了解关于post CSS细节，大家可以打开post CSS的官网，这里我们打开giub这个，呃，所谓的post CSS的一个read me介绍在这里边呢，大家看到post CSS呢是一个转换样式的工具，它使用的是GS的插件的形式。

这个插件呢，可以呃，去格式化我们的CSS，它可以支持变量或者是混入mix in，还可以去编译我们CSS最新的一些语法。行内的图片啊等等等等，那我们可以去做个例子，在这个官方文档的下边还有一个plug ins，这里面介绍了很多很多的关于这个post CS的插件，我们看到这里关于有我们可以使用CS特性的auto，我们可以去给CSS添加一些前缀，比方说我们在样式中使用了flag box，那我们可以直接加个display flex，它就会帮助我们加适合于一些浏览器的前缀。另外呢，比方说我们还可以去更好的去做一些CSS的可读，比方说我们去使用post CSS ne，可以让我们的CSS的样式实现嵌套，这个在我们的ssla sla里面经常用到，我们可以拿这个来举例，点到这个插件的官网里面去，然后我们看到这就是真实的使用了post CSS ne的一个效果，我们可以在样式里边继续加吉连的一些选择器。

具体的使用方法呢，大家可以去安装一下post CSS和post CSS ne，我们可以回到Vs code，把项目先停止一下，执行一下PN PM install post CSS以及post CSS ne杠大D，稍等片课以后呢，这两个依赖包安装好了，然后我们在项目的game录下面创建一个新的文件，叫做post css.conflictf.JS然后根据官网给我们提示，我们通过一个module.ports来去配置这个插件，我们的copy过来这个auto我们没有去安装，我们只使用了这个post CSS neted，好了保存一下，然后呢，我们就试验一下这个效果是否正常的运行，我们可以把我们的项目重新的再启动一下，执行一下PMPM，然后run d。

这样我们的项目呢，就重新的启动起来了，接下来我们在源码的app.gsx里边，在这下边呢，我们再去创建一个标签SPA，在这个里边呢，我们去加三个叹号保存一下，那么这三个叹号呢，现在还没有使用样式，我们可以在我们的as sets styles下的hello，就是CSS里边的title的下面，我们试图去添加一个SPA这样的机连的一个选择器，选择这以后呢，你可能会说这个样式肯定浏览器不支持的，那么有了post CSS呢，它就支持了，在这里边Vs code呢，还暂时不支持我们这种写法，这只是一个视觉上的一个提示，我们暂时先不用管它，我们现在呢，在SPA下面加一个color red保存一下，好，大家看到现在呢，瞬间我们的三个叹号呢，就变成了红色，如果我们不使用这个插件，这个SPA标签得写到外面去，我们可以这么写，第2TITLE SPA，那这样写的话呢，很显然就不方便了，呃，不方便我们的样式的。

的管理和读写好，我们把它给恢复一下，保存一下。有了对post CSS的集成，我们就可以通过at import来实现内联和变机。回到wait的官网，关于at import内联变机，这里有段介绍说waitt通过post CSS杠、import来预配置支持了我们CSS的at import内联。另外wait的别名路径啊，也遵循CSS的at import，一会儿我们演示一下如何去设置别名，换句话说，所有的CSSURL这个引用，即使我们导入的文件不在这个目录里，它也总是能够自动编辑，以确保我们引用路径的正确性。那sless的文件也支持at iport别名和URL点机，具体呢，大家可以参阅CSS pre processor了解相关的细节。那回到代码呢，我们来详细的给大家演示一下关于路径的别名、辨机等这些基础知识。

我们可以呃，在我们当前的这个项目里边来去做一些改造，首先呢，我们先打开app.gsx这个文件呢，通过import引入了一个CSS文件，这个文件大家仔细看一下，它是处在我们a set styles hello.css，那就意味着我们可以使用相对路径来去引用。当然了，我们也可以在任何的路径里边去引用我们S的内容，那这样的话呢，我们就可以实现不在同一个目录下面也可以引入任何的CSS文件了。另外呢，这样的引用如果是路径比较浅的话，还能可以，比方说在同一个目录下面也没有问题，但是如果目录比较深，一个特别深的一个子目录下的子文件，再去引入另外一个目录下面的很深的一个子文件的话，这个路径需要上很多层，然后才能找到我们真实的这个文件，那需要我们给这个路径起个别名，关于这个别名的，呃，重命名啊，我们在外PE里面经常用到一个叫做resolve，或者是is。

关于这块内容呢，大家可以参照外PE的B站的我的一些视频，那现在呢，我们看看如何在wait里边去设置这个别名，我们可以在wait.con JS里边直接去配置，因为wait可以支持这个直接的所谓别名的配置，我们可以输入一个叫做resolve resolve是个对象，里边有个is就是别名，别名也是个对象，对象的K呢，就是我们别名的名字，比方说我们起名为at styles，它的值呢就是设置一个具体的物理路径，这里呢，我们可以以杠开头表示我们项目的根，在项目的根目录下面有个src目录，Src目录下面有个sets，呃，Sets下面有个styles，那我们把这个路径就设置到了S这个目录下面，那我们把as sets写完，再写一个styles，那将下来呢？我们想要引入这个目录下的文件，我们只需要去使用这个别名就可以了。我们。

做实验，下面呢，我们再次打开app.jsx，将我们这个相对路径的引用变成一个别名的方式保存好，我们发现呢，这个页面正常的能够引入我们的样式，那同时呢，我们在同一个目录下面，当然也可以用，比方说我们在styles里边创建一个新的文件，取名为index.css。

然后我们可以通过at port这个语法去引入我们某个路径下的这个CSS文件，当然可以是同一个目录，也可以是不同的目录，在这里面呢，我们照样可以使用别名，比方说at styles，然后下面呢，我们有一个叫做hello。点CSS保存一下，然后打开APP的JSS，将hello.css改成index.css保存一下，我们发现呢，这个页面正常能够应用我们的样式，而且呢是一个所谓的热更新的，那接下来呢，我们下面再去通过。呃，这个所谓的index的CSS去覆盖一下，我们还掉CSS title下面的span的样式，我们来看一下是否生效，我们再写一个title span，我们可以把这个color呢变成一个blue，或者是换个颜色。呃，换一个叫做green，保存一下，大家发现这个三个叹号呢，就变成了绿色，说明我们这个at import的引用是没有问题了。

我们在中还可以使用CSS modus。我们再次来到vita的官网。任何以点mo.css作为后缀名的CSS文件都可以被认为是一个CSS modus文件。也就是说，我们在wait中想使用CSS modules，必须把这个文件的名字命名为x.module.css。那关于CSS modus，也就是CSS模块，大家可以点击这个链接去了解详情，它的本身不属于weight的内容，那在V中如何使用呢？比方说我们定义了一个example module.css然后我们定义了这样的一个样式，定义一个类red color red。

然后呢，我们可以把这个文件当成是一个模块导入进来，我们使用一个公共对象classes来代表我们这个模块对象，然后呢，我们想访问red这个样式，我们只需要写classes.red就可以了。我们回到代码来演示一下，我们可以在styles里面创建一个新的文件，取名为example.module.css注意这个扩展名一定是点module.css。我们可以写一个点size这样的一个样式，在样式里边呢，我们通过font size来定义一个字号，叫做30PS，然后接下来呢，我们就使用这个CSS模块。打开app.jsx，我们来导入这个模块，通过import我们给它起个别名叫fo，然后from，我们也可以使用这个at styles别名，或者是一个文件夹的代称来去引入我们刚才定义好的example.module.css引入进来以后呢，我们就可以在这里头去加入我们放里边的那个size，那个class了。

由于这里呢，我们是需要使用一个变量，所以我们需要改造一下class的语法，在GSS里边我们写个花括号，里边就可以写JS表达式了，我们可以使用一个ES6的模板。在这里边呢，我们先把刚才的title写好，接下来我们使用Dollar画括号来写一个变量，我们可以写一个放对象下面的size这个class样式保存一下，我们发现这个字号就变大了，说明刚才我们的example的module.css已经生效了。我们再回到官方文档，这里还有一个知识点说CS modus的行为可以通过CSS.modus这个选项来进行配置，比方说我们可以配置一个locals convention，这样的话我们可以配置一个camel case，或者是camel case only等等。

那我们定义成一个camera case以后，我们就可以直接通过这个小写的驼峰的方法来去引入某个样式了。比方说我们在样式里面定义了一个点apply color，那我们就可以直接的从这个模块里面导出apply color，注意这里是小拖峰的写法，不需要再通过一个公共的对象来去访问某一个样式了。我们再举个例子，回到代码，我们可以把这个配置文件先配置好。打开wait.conflict.js这个下边呢，我们先配一个CSS，在CSS里边呢有个modus这样的属性，Modus是个对象，我们再去写一个叫做locals con，那我们可以写一个camera case，小拖风，然后接下来呢，我们就可以去修改一下我们的example modu.CSS比如我们把size改成title-size，这是一个key up case也肉串的写法，接下来呢，我们在app.gss里边去导入我们这个所谓的title size，我们现在呢就不使用这个放了，我们直接在这里边写一个title size，注意这里用小拖峰的写法，S要大写，T要小写。

然后接下来呢，我们直接的把t size放到这儿来保存一下，这样的话效果是一样的。最后我们来看一下在wait里面如何使用CSS pre processor，也就是使用s less和S。我们再次回到V的官方网站，关于CSSD处理器，我们看到这里边提到了V呢，其实提供了对s less s stylelas的内置的支持，我们没有必要为他们安装特定的V插件，但是必须安装相应的预处理器的依赖，比方说SARS，我们需要装一下ss less ste。大家都知道，在装SS的时候之前我们还必须得装一个note s去编译我们的SS，在呃，Wait里边我们就不需要装了，直接装个S就可以了。

我们来给大家演示一下，回到代码，我们在stellla里边去构建我们这个s ste的文件，我们先演示一下SARS，我们新建一个文件，取名为叫做S-s.SSCSSSSCSS是SS文件的一个扩展名，我们呢先退出我们这个服务，执行一下PN PM install。然后SARS。告诉大地。安装完了以后呢，我们就可以写一个SS的代码了，比方说我们写个变量Dollar b color，颜色为red，然后呢，我们可以给我们的点title单独的定义一下这个呃，Title的背景颜色，我们可以定义一个background color，它的颜色呢就是这个变量Dollar b及color。大家都知道这个代码呢，在浏览器里是不能运行的，我们必须通过weight来去解析S才可以好保存一下。

然后呢，在我们的APP的GSX里边去引入这个所谓的SS文件，我们可以在这下面直接导入at styles下的S-test.css保存一下，然后我们再次重新启动一下我们的服务。好，我们看到现在呢，我们的服务启动起来了，这个div的背景变成了一个红色。好，接下来呢，我们再演示一下Les，我们呢仍旧是退出来执行一下PMPM install Les，同时呢，我们把styla也安装好，省得一会儿我们再安装了。我们先来演示一下lesss，首先我们还是在styles里边创建一个新的文件，取名为lesss-test.less这样的一个文件，然后呢，我们去创建一个变量s BG color，它的颜色呢，我们可以定义成一个tomato西红柿这样的颜色，然后我们仍旧是给title去加一个background color，它的颜色呢，就用这个变量at以及color保存一下，然后回到咱们APP的GSX，把这个SARS端引用先暂时住掉，我们再去引用一下at。

Styles下的less g test.less保存一下，然后我们再次重新启动一下我们的服务，执行一下p PM run deve，然后我们再去刷新一下页面，好，我们看到这个背景颜色呢，变成了一个西红柿的颜色，那接下来呢，我们再去演示一下style，我们现在把这句话先注释掉，然后呢，在styles里边创建一个新的文件，我们叫做s sta，然后杠test.tyl，注意stless的扩展名是TYL。好，在这里边呢，我们仍旧是去定一个变量，我们定义过的啊，B级color带定义变量就是可以使用BG color等于我们把它的值定义成orange。

橙色，然后我们再次定义title，注意在status里边我们可以不写划括号，直接写一个background color，然后把它的颜色定义成BG color，当然我们这个冒号也可以不写，保存一下，然后打开我们的APP的GSX，这里边呢，我们需要把这个star文件给导入进来，At。Styles下单s style港test.tyl保存一下好，我们看到现在背景颜色变成了一个橙色，这都是模块热替换的。