webpackの処理の流れ 上記を踏まえた実装例 SCSSを使用する場合 Typescriptを使用する場合 webpackの処理の流れ Webpackは、JavaScriptアプリケーションのためのモジュールバンドラーであり、アプリケーションに必要なすべてのモジュールを取り込み、それらを1つまたは複数のバンドルにまとめます。 一般的なWebpackの処理の流れは以下の通りです：1. エントリーポイントの指定: webpackの最初のステップは、アプリケーションのエントリーポイントを特定することです。 通常、このエントリーポイントは、アプリケーションのメインファイルであり、依存関係のチェーンを…

まーーーたstylelintが止まった。ちょうどいいから設定など見直しました。 あと！！！！！！ 検索すると！！！！！！ まーーーーーーだcssの並べ替えをcsscombにやらせよう、という記事がたくさん出てきて「そんな長らく開発されてねえもんを使うな！ VScodeのプラグインも使うなって書いとる！」と憤ってしまった*1。cssの並び替えをしたい人はcsscombではなく、Postcssやstylelintにやらせましょう。自分はVScodeでscssをcssにコンパイルしていますが、live sass compilerがベンダープレフィックスやらコンパイルやらはやってくれるので、scssと…

こんにちは。弁護士ドットコム クラウドサイン事業本部 Product Engineering 部の林と申します。執筆時点では入社1か月の新入社員です。もちろん入社してはじめて書く技術ブログですが、新参者でも臆せず発信できる組織ということをアピールしつつ、ジョインしたての業務で学んだことを整理します。 Vue2.7へのアップグレードに伴うv-deep移行作業の背景 v-deepを:deep()に移行する際に詰まったところ 正しい:deep()の適用範囲 ちなみに（GPT-4に聞いてみた） まとめ Vue2.7へのアップグレードに伴うv-deep移行作業の背景 現在、クラウドサインのフロントエンド…

stylelintとは？ stylelintの実行方法 1. Stylelintのインストール npmを使用する場合 yarnを使用する場合 2. Stylelint設定ファイルの作成 JSON形式の例 YAML形式の例 3. スタイルガイドのインストール 4. Stylelintの実行 コマンドラインから実行 スクリプトに追加 5. エディタの統合 6. 自動修正機能の使用 Stylelint実行前後の差分の例 1. Stylelint実行前のCSSファイル 2. Stylelint設定ファイル 3. Stylelintの実行 4. Stylelint実行後のCSSファイル 5. 差分の説明…

CSS激アツニュースです。ついにSafari16.4でmedia queryのrange記法に対応したので、今後は「min-width……max-width……どっちがどっちだった？」と迷わなくてよくなりそう。 詳しくはこちらの記事を読んで欲しい。zenn.dev /* いままでの書き方 */ @media screen and (min-width: 992px) {} /* range記法 */ @media screen and (992px <= width) {} /* あるいは */ @media screen and (width >= 992px) {} 不等号の向きはプロジェ…

Sassでは、親要素に指定された複数のクラス名のうち、特定のクラス名を持つ要素を選択するために、セレクタの複合クラスを使用します。 例えば、class属性が "a b" となっている要素に対して、"a"クラスの中で"b"クラスを選択する場合、以下のように書くことができます。 .a { /* aクラスのスタイル */ &.b { /* aクラスかつbクラスを持つ要素のスタイル */ } } 上記のSassコードでは、"&"を使用して親要素を参照し、"."を使用してクラス名を指定しています。"&.b"と書くことで、親要素が"a"クラスかつ"b"クラスを持つ要素を選択することができます。 例えば、以…

本記事では、SCSSをリアルタイムでコンパイルしてくれるVS Codeの拡張機能ご紹介しています。 Live Sass Compilerの準備 Live Sass Compilerの使い方 余談：より使いやすいSCSSの開発環境へ 参考記事 Live Sass Compilerの準備 まずはリアルタイムでSCSSをコンパイルしてくれるVS Codeの拡張機能を入れていきます。 まずはVS Codeを開き、左タブにある拡張機能の項目を選択してください。 そして検索項目に【Live Sass Compiler】と入力すると、2つほどでてきます。 ここで、斜線の入っていない方を選びインストールしてく…