首页 >web前端 >css教程 >用Vite和Lightning CSS编译CSS

用Vite和Lightning CSS编译CSS

Lisa Kudrow原创: 2025-03-07 16:57:11659浏览

Compiling CSS With Vite and Lightning CSS

>与CSS进步保持最新状态通常意味着要努力处理浏览器兼容性问题。即使具有广泛的功能发行，用户浏览器版本也可能落后。我们通过特征检测（@supports），进行性增强和多填充来解决此问题。构建工具提供额外的帮助。

>许多CSS开发人员使用预处理程序（SASS，更少），但随着天然CSS功能（例如嵌套和自定义属性）的演变，其必要性却减少了。前处理器主要提供组织福利并扩展CSS功能。后处理工具，例如PostCSS，处理诸如自动预装和缩小之类的任务。

>典型的构建管道通常涉及：

>静态资产生成
>应用程序文件构建
捆绑以部署

> CSS处理通常属于第一步，包括预处理和后处理。现代CSS减少了对预处理器的依赖，可能会简化该过程。

vite：快速的CSS编译器

Vite是一种非常受欢迎的构建工具，在构建JavaScript前端框架（Angular，React，Svelte，Vue）方面表现出色。它的速度和适应性使其成为宝贵的资产。虽然主要以JavaScript为名，但Vite无缝处理CSS而无需JavaScript代码。它支持SASS（需要单独的安装），并以最少的配置为生编译CSS。

本教程使用节点和NPM。确保安装它们。创建一个新项目：

npm create vite@latest

>选择“香草”和“ javaScript”作为基本模板。在您的IDE中打开项目。对于此演示，删除

，assets/，public/和src/。仅保留.gitignore和index.html。用以下方式替换package.json的内容 index.html

>安装Vite的依赖项：

<!DOCTYPE html>


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

这会创建

>和

npm install

。在其中创建一个

文件夹，并在其中创建node_modules/。添加一个package-lock.json标签到styles/>：main.css> <link> index.html将一些CSS添加到

：

<!DOCTYPE html>


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>
  <link rel="stylesheet" href="styles/main.css">

main.css运行vite build命令：

body {
  background: green;
}

文件夹包含构建文件。

npm run build

（具有唯一哈希）显示了缩小的CSS。

>为了更快的迭代，请使用Vite的开发服务器：dist/ assets/index.css

>这在端口5173上启动了服务器。HTML或CSS的更改会立即反映。使用

停止服务器。

>用级联层组织

>当前不可能将级联层直接应用于<link>标签时，VITE允许我们为组织目的进行模拟。在main.css中，定义层：

npm create vite@latest

createreset.css并导入CSS重置（例如，Mayank's）：>

<!DOCTYPE html>


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>

创建

layouts.css layer：layouts>

npm install

>在>和reset.css，以维护所需的顺序。这种方法有助于管理CSS的优先级和分组。layouts.css> 使用LightningCSS index.html进行后处理 > LightningCSS增强了跨浏览器的兼容性。安装它：

创建

：

<!DOCTYPE html>


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Only Vite Project</title>
  <link rel="stylesheet" href="styles/main.css">

vite.config.mjs在

>中用

body {
  background: green;
}

颜色进行测试：

> oklch main.css：

npm run build

configurebrowserslist：

npm run dev

这允许对LightningCSS功能进行细粒度的控制。 vite.config.mjs>必要性？

/* styles/main.css */
@layer reset, layouts;

>对所有项目都不重要，但这些技术（尤其是对于较大的项目或设计系统）在组织，跨浏览器兼容性和CSS优化方面具有显着优势。

以上是用Vite和Lightning CSS编译CSS的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript json css less html npm sass angular postcss Static define for while select auto public delete this ide

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：One of Those "Onboarding" UIs, With Anchor Positioning下一篇：Revisiting CSS Multi-Column Layout

查看更多