shoelaceをレール7、esbuildとpostcssでインストールする方法

12/17 Update: I had incorrectly used an import path for setBasePath below which inadvertently included the entire Shoelace library. Please review the updated import path for an optimized bundle size!

Shoelace フレームワークagnosticであり、HotwireスタイルのWebプロジェクトとうまく動作するフロントエンドコンポーネントの素晴らしいライブラリです.私は2009年のブランドの新しいリリースを試してみたかったRails 7 靴ひもと一緒に、私はすぐに罠に入りました.
Rails 7は、インポートマップとスプロケットに基づくフロントエンドパイプラインでデフォルトで出荷します.私はここで公開記録に行きます.私はいくつかの克服不可能な問題に靴紐を“ピン”しようとすると私の選択の部品をインストールするだけでなく、Shoelaceのグローバル設定CSSの変数をロードに実行します.ブー.
ありがたいことに、Rails 7に関するより魅力的なのは、その追加のサポートですesbuild and PostCSS , つの非常に高速で、非常に、非常にカスタマイズ可能なフロントエンドビルドツールです.ESBuild用のBOXから実際の設定ファイルを出荷していないので、そのようなことを適切なリソースと一緒にすることができます.多分、コミュニティは上がることができます.
一方、Shoelaceをインストールするなどの一般的なユースケースの場合は、このセットアップを確実に使用できます.しかし、私はあなたがここで解決するのを助けるgotchasのカップルがあります.

レールの設置

まず、このコマンドを使用して新しいRails 7アプリを作成します.

rails new rails7demo -j esbuild -c postcss

The -j esbuild 引数を使用すると、EasBuildをJavaScriptのバンドルに使用したい場合は-c postcss CSSのバンドルです.
ここからは、単に実行することができますbin/dev ESBuildとPostCSSのウォッチプロセスの両方に沿ってRailsを起動する.

靴下の設置

この部分は非常に簡単です!単にこのコマンドを実行します.

yarn add @shoelace-style/shoelace

次に、いくつかのコンポーネントをapp/javascript/application.js ファイル

import "@shoelace-style/shoelace/dist/components/button/button.js"
import "@shoelace-style/shoelace/dist/components/icon/icon.js"
import "@shoelace-style/shoelace/dist/components/spinner/spinner.js"

そして、サイトスタイルをより少し全体的によりよく見るapp/assets/stylesheets/application.postcss.css :

body {
  font-family: -apple-system, sans-serif;
  background: #eee;
}

さて、HTMLビューでshoelaceを試してみましょう.まず実行します.

bin/rails generate controller Articles index --skip-routes

そして、我々はconfig/routes.rb ファイル

Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  root "articles#index"
end

靴紐コンポーネントを追加することができますapp/views/articles/index.html.erb :

<p><sl-button type="primary">
  <sl-icon slot="prefix" name="twitter"></sl-icon>
  Follow on Twitter
</sl-button></p>

<p><sl-spinner style="font-size: 3rem; --track-width: 6px;"></sl-spinner></p>

ランbin/dev そして、http://localhost:3000 そして、ああ、それは右見ていない!ShoelaceのグローバルスタイルシートをサイトにCSS変数を追加するのを忘れました!
どのように、我々はそれをしますか?スタイルシートをインポートしようとするとapplication.js ファイル、esbuild、postcssは出力をクローズするapplication.css ファイルapp/assets/builds . 🙁 とスタイルシートを直接インポートしようとするとapplication.postcss.css , Postcss Configは何も特別なことはしないので、まったく動作しません@import ステートメントは、実際には何もからインポートすることはできませんnode_modules フォルダ.☹️

インポート問題の修正😃👍

これには2つの解決方法があります.
つは、出力ファイルを変更することによってESBuildbuild:css スクリプトpackage.json 他にapplication.css , 次に、stylesheet_link_tag アプリケーションのレイアウトに.これはおそらく最高の解決策全体です.しかし、私たちは、既存のビルド設定をそのまま維持することができるかどうかを確認する価値があると思います.では、試してみましょう.
まず、このコマンドを実行します.

yarn add postcss-import

次に、あなたの更新postcss.config.js ファイルは以下のようになります.

const atImport = require("postcss-import")

module.exports = {
  plugins: [
    atImport,
    require('postcss-nesting'),
    require('autoprefixer'),
  ],
}

次に、このあなたの上部に追加application.postcss.css ファイル

@import "@shoelace-style/shoelace/dist/themes/light.css";

今あなたのサーバーを起動し、再度サイトを試してみると、それは実際にこの時間を動作するはずです!ボタンをクリックします.どこのアイコンですか?
我々は、我々がshoelaceの資産フォルダからアイコンをコピーするプロセスを準備する必要があります.

アイコン資産のコピー

我々は、この簡単な方法を行います.shoelaceアイコンがどんな頻度ででも変わることがありそうもないので、我々はキャッシュ・ブッシング目的のために彼らを指紋について心配する必要はありません.私たちはちょうどそれらをダンプすることができますpublic そして、それを一日呼ぶ.
まず、スクリプトを更新するpackage.json このように見えます.

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "yarn shoelace:copy-assets && postcss ./app/assets/stylesheets/application.postcss.css -o ./app/assets/builds/application.css",
    "shoelace:copy-assets": "mkdir -p public/shoelace-assets && cp -r node_modules/@shoelace-style/shoelace/dist/assets public/shoelace-assets"
  }

我々がここでしたすべては、加わりますyarn shoelace:copy-assets PostCSSコマンドの前で、コピーアセットスクリプト内で新しいフォルダーを作成し、node_modules . 我々は、これを行うたびに我々は、サイトを起動するので、将来的にあなたがshoelaceをアップグレードする場合は、常に最新のアイコンを設定する必要があります.
次に、次のように追加しますapplication.js だからshoelaceはどこでアイコンの資産を見つけるかを知っている:

import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js"
setBasePath("/shoelace-assets")

ランbin/dev プレスト!あなたのshoelaceボタンを今すぐTwitterのアイコンをそれに移動している.
そして、それはあなたの光沢のある新しいレール7 + esbuild + Postcssアプリでshoelaceコンポーネントを使用する方法です.楽しむ!🥳