Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light com CDN-css教程-PHP中文网

首页

web前端

css教程

Ruby on Rails 前端 Rápido com 框架 CSS Classless 或 Class-Light com CDN

Patricia Arquette

Jan 23, 2025 am 02:17 AM

Ruby on Rails Frontend Rápido com Frameworks CSS Classless ou Class-Light com CDN

创建新的 Rails 应用

time 命令在 rails serve 命令执行完毕后显示执行时间。下例显示执行时间为 47 秒。

$ rails -v
Rails 8.0.0

$ time rails new classless-css-cdn
...
real    0m47.500s
user    0m33.052s
sys     0m4.249s

Rails 8 基于其“无需构建”理念，默认使用 Propshaft 作为资源管道库，使用 Importmap 作为 JavaScript 库。Importmap 不会对 JavaScript 进行任何处理。

使用 VSCode 或您喜欢的编辑器打开项目

$ cd classless-css-cdn && code .

创建一些页面来查看 HTML 元素的样式

页面位于系列文章第一篇中的“常见步骤”部分。

再次打开 `app/views/layouts/application.html.erb` 文件，通过 CDN 引用无类 CSS 样式

展开更多…

- 在以下内容之后

以及之前，粘贴以下内容。您无需使用所有这些样式，它们是为了让您可以测试多种选项而添加的。


     <!-- 不同浏览器之间可能存在不同的边距或字体 -->

    <link href="https://cdn.jsdelivr.net/npm/normalize.css" rel="stylesheet"></link><link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet"></link> %>
      %>



     %>



     %>



     %>



     %>



     %>



     %>



     %>




    <link href="https://unpkg.com/sakura.css/css/sakura.css" media="screen" rel="stylesheet"></link><link href="https://unpkg.com/sakura.css/css/sakura-dark.css" media="screen and (prefers-color-scheme: dark)" rel="stylesheet"></link> %>



     %>

大多数样式都被注释掉了，除了 Normalize CSS 和 Pico CSS。
保存文件并刷新页面或重启服务器。
要测试不同于 Pico CSS 的样式，请注释掉设置样式 CDN 的行（即 <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" rel="stylesheet">），并取消注释其他样式的行，例如 Simple CSS 的行。
在 VSCode 中注释和取消注释一行，可以使用快捷键 Ctrl K C。

使用基于 CDN 的无类 CSS 框架进行 HTML 样式设置 ?

保存上述样式表并启动 Rails 服务器后，您将看到使用所选无类 CSS 框架设置样式的 HTML。

暗黑模式

某些样式具有暗黑模式 (dark mode) 选项。要确认，请在您的计算机的色彩个性化设置中更改主题。在 Windows 中搜索“启用应用的暗黑模式”，并在暗黑模式和亮模式之间切换。更改操作系统设置后，HTML 页面应该会自动更改，表明它支持亮模式和暗黑模式。

后续步骤

[-] 根据您的喜好整理样式； [-] 使用项目中的 CSS 文件进行样式设置，无需使用 CDN； [-] 使用 Rails Live Reload 在浏览器中动态更新项目中的更改； [-] 如果您想花更多时间在前端，请查看您喜欢的样式的自定义选项； [-] 使用 Tailwind 复制无类 CSS 框架的功能；