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

bowerのインストール

業務でAngularJSをいじっていますが、そこでbowerというソフトウェアの存在を知りました。 Contents1 bowerとは?2 インストール方法 bowerとは? フロントエンドのパッケー …

no image

AngularJSについて

前回のbowerの記事でちょこっと書きましたが、最近はAngularJSというJavaScriptのフレームワークを触っています。 数年前から流行りだしているようで、少しずつ使っている方も増えているの …

no image

requirejsでのモジュール読み込み

JavaScriptのモジュール化では2019年5月現在ではwebpackなどを使うことが一般的かと思いますが、以前はrequire.jsなどというライブラリがあったようです。 例えば下記のようなファ …

no image

gulpに関して

gulpに関しての復習と色々と間違っていたところもあるのでまとめ。 ちなみに以前書いた記事は下記 gulpインストールとタスクの実行 Contents1 インストール2 タスクの実行3 npxコマンド …

no image

Angular概論 モジュール、コントローラー、スコープなど

Contents1 Angularインストール2 ソース2.1 モジュール、スコープとコントローラ2.1.1  モジュールとは2.1.2 コントローラーとは2.1.3 スコープとは3 参考リンク An …

アーカイブ