webpack

スポンサーリンク
Web系

webpackでSASSをコンパイルするとcontentの値が文字化けする問題の対応

SASSでcontentの値にバックスラッシュ(環境によっては円マーク表示)で始まる文字コードを記述してwebpackでビルドすると、生成されたCSSのcontentの値が文字化けしました。 例えばSASSの時点で下記のような記述です。 c...
Web系

Node.jsで追加したCSSのパッケージを利用する

LESSのmixins系ライブラリであるlesshatをnpmでインストールし、webpackで圧縮して使用することにします。 インストール $ npm install -D lesshat; 設定ファイル package.json { "...
Web系

Node.jsとEJSとwebpackでテンプレート管理出来るweb制作環境を作る

過去に似たようなことを試しましたが、webpackのバージョンも上がり新たに環境を作ってみました。 前回はEJSのwebpack用プラグインを使いましたが、アップデートが放置されており不安だったのと、プラグインを使わない方法を実践している参...
Web系

軽量CSSフレームワークのmini.cssを使ってみた

レスポンシブ対応ウェブサイトを作る際に、全て自分でCSSを設計するのは面倒なので、適当なフレームワークを使うことが多いです。これまではbootstrapばかり使ってきましたが、せっかくなので別のCSSフレームワークを使ってみることにしました...
Web系

webpackを用いた静的サイトのテンプレート管理

昔の名残で未だ静的サイトを作る際はAdobe Dreamweaverを使っていますが、重いし何かと不安定なところもあり、使うこと自体辞めたいと思いつつも使っているのは、共通部分をテンプレートとして管理する為だけだったりします。 静的サイトジ...
Web系

日本語サイト向けBootstrapのhonokaをwebpackでビルドする

レスポンシブ対応サイトを手早く作れるHTMLフレームワークである"Bootstrap"は様々な所で採用されていますが、本家からフォークされ日本語サイト向けにカスタマイズされた"honoka"というフレームワークがあります。 配布元のwiki...
スポンサーリンク