用Vite和Lightning CSS编译CSS

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

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

>

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

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

> 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的依赖项：

  <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添加到

：

  <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）：>

  <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增强了跨浏览器的兼容性。安装它：

创建

：

  <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中文网其他相关文章！