skillup

技術ブログ

JavaScript

cssフレームワークをnode_modulesから読み込む+cssの拡張

投稿日:2017年11月25日 更新日:

JavaScriptを1ファイルでまとめて読み込める方法が分かったので(参考リンク npmでのJSライブラリインストール)、CSSでも似たような方法があったのでメモ。

流れを言うと、下記のようになります。

  1. npm コマンドでcssフレームワークを読み込み
  2. 自分で@importを記述し、npmで読み込んだファイルを読み込み(sassでコンパイルするのが一般的なようです。)

bulmaというcssを上記の方法で読み込んだので実例をメモします。

ファイル構成
|――node_modules (ここにインストールされています。)
|
bulma ─ css (ここに実際に使うcssを吐き出します。)
└── sass
├── main.sass
└── mystyle.scss

main.sass (コンパイルされる予定のsass)

mystyle.scss(オリジナルのcss)

gulpfile.js

もちろんpackage.jsonでもOKです。

あとは下記コマンドを実行すればcss直下のディレクトリにフレームワークのcssとオリジナルのcssがまとめてはかれます。

ちなみにcssフレームワークは読み込み前に定義しておけば、内部のパラメーターを変更できたり、cssフレームワーク内のクラスをさらに拡張したりすることができたりします。

*bulmaはできましたが、恐らく他のフレームワークでも同じかと思います。

参考リンク

Bootstrap 4 のビルドツールは npm-scripts で決まり

 

-JavaScript
-, , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

無限スクロールプラグイン infinite scroll

無限スクロールのプラグインについていろいろ調べてきましたが、今回はテーブル形式でなく、通常の無限スクロールができるもの(イメージとしてはtwitterっぽい遷移。) infinte scroollとい …

no image

携帯のUIに関して

いまさらながらスマホのUI表示に苦戦してます。 まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。 私の場合、デザインが本業でないこともあり、ちょっとサボっていまし …

no image

Firebaseについて

前回Lambdaに少し触れましたが、2019年6月現在、サーバーレスなアプリというものが活況(?)のようです。 大規模なアプリというと Webサーバー+RDB+サーバーサイドプログラミング言語 が必須 …

no image

Angularでのイベント+改行+echoでのバッファサイズ変更

Contents1 Angularのイベント処理2 Angularでの改行ネタ3 echoでのバッファサイズ変換 Angularのイベント処理 Angularを使っていて楽なのはHTMLタグにインベン …

no image

font-awesomeのインストール(タスクランナー経由)

fontawesomeをタスクランナー経由でインストールすることについて。 CDNでインストールするだけならURL張り付けるだけですが。 インストール まずnpmで下記コマンドでインストールをします。 …

アーカイブ