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

投稿日：2017年11月25日更新日：2018年5月11日

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

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

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

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

 npm install bulma -D

1	npm install bulma -D

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

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

@import "node_modules/bulma/bulma.sass";
@import "mystyle";

1 2	@import "node_modules/bulma/bulma.sass"; @import "mystyle";

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

div.hogehoge{
	.hogehoge2{
		font-size:10pt;
	}
}

div.hogehoge{

.hogehoge2{

font-size:10pt;

}

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less');

var gulp_sass = require('gulp-sass');

gulp.task('original_compile',function(){
    return gulp.src(['bulma/sass/main.sass'])
                //ここをcompressedだと圧縮してcssがはかれます。
                //outputStyle: 'expanded'にすると通常のcssがはかれます。
               .pipe(gulp_sass({outputStyle: 'compressed'}))
               .pipe(gulp.dest('bulma/css'));
});

var gulp = require('gulp');

var less = require('gulp-less');

var gulp_sass = require('gulp-sass');

gulp.task('original_compile',function(){

return gulp.src(['bulma/sass/main.sass'])

//ここをcompressedだと圧縮してcssがはかれます。

//outputStyle: 'expanded'にすると通常のcssがはかれます。

.pipe(gulp_sass({outputStyle: 'compressed'}))

.pipe(gulp.dest('bulma/css'));

});

もちろんpackage.jsonでもＯＫです。

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

 npm run original_compile

1	npm run original_compile

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

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

//ここにcssフレームワークの変数を設定する記述をかく。例えば下記
$table_width:350px;

@import　"node_modules/bulma/bulma.sass"

//ここにcssフレームワークのクラスを元に拡張させるような処理をかく
.new_class{
   @extends(.cssフレームワークの何らかのクラス)
}

//ここにcssフレームワークの変数を設定する記述をかく。例えば下記

$table_width:350px;

@import　"node_modules/bulma/bulma.sass"

//ここにcssフレームワークのクラスを元に拡張させるような処理をかく

.new_class{

@extends(.cssフレームワークの何らかのクラス)

}

参考リンク

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