Ruby on Rails フロントエンド フレームワーク CSS クラスレス または クラスライト 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 が表示されます。

ダークモード

一部のスタイルにはダーク モード オプションがあります。確認するには、コンピュータの色の個人設定でテーマを変更します。 Windows で「アプリのダーク モードを有効にする」を検索し、ダーク モードとライト モードを切り替えます。オペレーティング システムの設定を変更すると、HTML ページが自動的に変更され、ライト モードとダーク モードをサポートしていることが示されます。

次のステップ

[-] 好みに応じてスタイルを整理します。 [-] CDN を使用せずに、プロジェクト内の CSS ファイルをスタイル設定に使用します。 [-] Rails Live Reload を使用して、ブラウザ内のプロジェクトの変更を動的に更新します。 [-] フロントエンドにより多くの時間を費やしたい場合は、お気に入りのスタイルのカスタマイズ オプションをチェックしてください。 [-] Tailwind を使用してクラスレス CSS フレームワークの機能を複製します。

参考资料

• https://www.php.cn/link/dfae769c739093f5225cecaf4d5a612f
• https://www.php.cn/link/930473a02d035f62b3c3c2628a284416
• https://www.php.cn/link/c42c101f89ec57e54230d611f74d5ae1
• https://www.php.cn/link/3f37c010783748f8e8577f732d74054c
• https://www.php.cn/link/480167897cc43b2fb914238f45d7dbbf
• https://www.php.cn/link/c48eb27d5b0a288f5bbf1545c218e001

以上がRuby on Rails フロントエンド フレームワーク CSS クラスレス または クラスライト com CDN の高速化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。