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

jquery multipleについて(基本編)

selectで複数選択をするときには通常のプルダウンでも可能ですが、プラグインを使うともっとスマートに対応できます。 今回私が実装したかったのがCSVアップロードorダウンロードで項目を自由に変更した …

no image

JavaScriptのexport

JavaScriptのexportについて。 es6の大きなメリットとして、ライブラリをモジュール化して、外部から読み込むことができますが、読み込み方に少し癖があります。 気をつけるポイントとしては、 …

no image

npmコマンドの整理

npmのコマンドのまとめに関して。 Contents1 npmとは?2 よく使うコマンド2.1 npm init -y2.2 npm install パッケージ名(npm -i パッケージ名)2.2. …

no image

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

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

no image

formのシリアライズ+return falseなど

ajaxでformの値を投稿しようとするとき、一つ一つの要素をjQueryでとっていたのですが、項目が多いとなかなか手間です。 そんな時、下記のメソッドで一気にフォーム要素を取得して投げることができま …