Web系 webpackでSASSをコンパイルするとcontentの値が文字化けする問題の対応
SASSでcontentの値にバックスラッシュ（環境によっては円マーク表示）で始まる文字コードを記述してwebpackでビルドすると、生成されたCSSのcontentの値が文字化けしました。例えばSASSの時点で下記のような記述です。con...
webpack
Web系 
Web系 Node.jsで追加したCSSのパッケージを利用する
LESSのmixins系ライブラリであるlesshatをnpmでインストールし、webpackで圧縮して使用することにします。インストール$ npm install -D lesshat;設定ファイルpackage.json{ "name"...
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に...