Web系 webpackでSASSをコンパイルするとcontentの値が文字化けする問題の対応 SASSでcontentの値にバックスラッシュ(環境によっては円マーク表示)で始まる文字コードを記述してwebpackでビルドすると、生成されたCSSのcontentの値が文字化けしました。 例えばSASSの時点で下記のような記述です。 c... 2023.12.10 Web系
Web系 Node.jsで追加したCSSのパッケージを利用する LESSのmixins系ライブラリであるlesshatをnpmでインストールし、webpackで圧縮して使用することにします。 インストール $ npm install -D lesshat; 設定ファイル package.json { "... 2021.07.14 Web系
Web系 Node.jsとEJSとwebpackでテンプレート管理出来るweb制作環境を作る 過去に似たようなことを試しましたが、webpackのバージョンも上がり新たに環境を作ってみました。 前回はEJSのwebpack用プラグインを使いましたが、アップデートが放置されており不安だったのと、プラグインを使わない方法を実践している参... 2021.04.17 Web系
Web系 軽量CSSフレームワークのmini.cssを使ってみた レスポンシブ対応ウェブサイトを作る際に、全て自分でCSSを設計するのは面倒なので、適当なフレームワークを使うことが多いです。これまではbootstrapばかり使ってきましたが、せっかくなので別のCSSフレームワークを使ってみることにしました... 2021.03.06 2021.08.01 Web系
Web系 webpackを用いた静的サイトのテンプレート管理 昔の名残で未だ静的サイトを作る際はAdobe Dreamweaverを使っていますが、重いし何かと不安定なところもあり、使うこと自体辞めたいと思いつつも使っているのは、共通部分をテンプレートとして管理する為だけだったりします。 静的サイトジ... 2020.05.06 Web系
Web系 日本語サイト向けBootstrapのhonokaをwebpackでビルドする レスポンシブ対応サイトを手早く作れるHTMLフレームワークである"Bootstrap"は様々な所で採用されていますが、本家からフォークされ日本語サイト向けにカスタマイズされた"honoka"というフレームワークがあります。 配布元のwiki... 2020.01.08 2021.08.01 Web系