Skip to content
This repository has been archived by the owner on Apr 5, 2024. It is now read-only.

Latest commit

 

History

History
44 lines (35 loc) · 1.54 KB

css-libraries.md

File metadata and controls

44 lines (35 loc) · 1.54 KB

English / 日本語

CSS/Sassライブラリを使用する

このフレームワークではパッケージ管理にnpmを使っています。 フロントエンド用のライブラリもnpmを使って簡単にインストールできます。

例: Bootstrapをプロジェクトで使う

$ npm install bootstrap --save

styles/main.scss

@import "node_modules/bootstrap/dist/css/bootstrap";
  • @importには.css拡張子を含めないようにします。(path/to/library.csspath/to/library

注意:
ライブラリに含まれるフォントや画像などのアセットが必要な場合は、"dist"と".tmp"ディレクトリにコピーしてください。

gulpfile.js

+ gulp.task('glyphicons', function () {
+   return gulp.src('node_modules/bootstrap/dist/fonts/*')
+     .pipe(gulp.dest('.tmp/fonts'))
+     .pipe(gulp.dest('dist/fonts'));
+ });
  ...
  gulp.task('pre:serve', function (callback) {
-   runSequence('clean:serve', ['styles:dev', 'scripts:dev'], callback);
+   runSequence('clean:serve', ['styles:dev', 'scripts:dev', 'glyphicons'], callback);
  });
  ...
  gulp.task('build', function (callback) {
-   runSequence('clean:build', ['html', 'styles', 'scripts', 'images', 'fonts', 'extras'], 'rev', callback);
+   runSequence('clean:build', ['html', 'styles', 'scripts', 'images', 'fonts', 'extras', 'glyphicons'], 'rev', callback);
  });

関連項目