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

gulpインストールとタスクの実行

今更ですが、gulpインストールと作業に関して。 less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。 別件でgul …

no image

AngularJSでのinfite_scroll

今回もAngularネタです。 一般的なデータの一覧画面ではページャーをボタンで移動するのではなく、スクロールするだけで次々とアクセスできるようになるのが一般的でしょう。 facebookやtwitt …

no image

ページャープラグイン dataTable

レコードを一覧表示する上で意外と面倒くさいのがページャーでしょう。 自力で作成してもよいのですが、なかなかこれが面倒だったりします。 また近年ではリンクを踏ませずに、スクロールするだけで表示ができる形 …

no image

クロスドメインがらみのajax

ajaxで別ドメインに対して、プログラムを実行したい時に注意すべきことなどを。 Contents1 ログ、レスポンスヘッダをとにかく追う2 特定ドメインからの許可3 フレームワーク側での認証ロジック( …

no image

PHP(DBアクセス)→HTML→Angularを実行するために

AngularJSでデータベースをつかうときには$httpや$resourceを使うことが多いですが、それ以前にAngularを読み込んでデータベースにアクセスしないことも重要かと思っています。 とい …

アーカイブ