Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Bootstrap3でlessファイルをカスタマイズ、コンパイルする

More than 5 years have passed since last update.

1. 目的

はじめてBootstrapを使ってWEBページをつくってみようとしました。

  • CSSをカスタマイズのためにはコンパイルが必要ということに気づく
  • lessって何?
  • コンパイルできて、カスタマイズできる環境にまで ←ここまで

環境は、MacOSX 10.9.5

2. Bootstrapを使う準備

公式サイトからソースコードのダウンロード。
ディレクトリ構造は以下のとおり。

/User/hogehoge/
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

前もってコンパイルされたCSSがはいっています。
Getting StartedにあるBasicテンプレートをindex.htmlとしてコピーして
/User/hogehoge/bootstrap/dist/に置きましょう。

/User/hogehoge/bootstrap/dist/をApacheのドキュメントルートにして、
apacheを起動して、表示を確認してみましょう。

Hello Worldが表示されたらOKです。

3. lessファイルをコンパイル

さて、ここからです。
cssをカスタマイズしたい場合、cssを直接修正するのではなく、lessフォルダにあるファイルを修正していきます。

lessって何?

lessを使うとcssをプログラム的に実装することができます。

まずはドットインストールのless入門講座をみてみましょう。理解が体感できます。
less公式サイトもチェック

lessファイルをコンパイルする環境を設定します

Gruntを使います。

Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

bootstrapのソースコードをダウンロードして解凍すると

  • Gruntfile.js

  • package.json

の2ファイルが含まれています。これらを使います。

Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。

npm, node.jsのインストール

すでに導入済みであれば問題ないです。
node.jsの公式サイトから、パッケージをダウンロードしてインストールします

grunt-cli のインストール


 npm install -g grunt-cli

 

依存パッケージのインストール

/User/hogehoge/bootstrap/ディレクトリで実行します。


 npm install

npm は同じディレクトリにある package.json を参照して、自動的に必要な必要な依存プラグインをインストールします。
package.jsonを参照すると、以下のものがインストールされるようです。

 "devDependencies": {
    "btoa": "~1.1.2",
    "glob": "~4.0.2",
    "grunt": "~0.4.5",
    "grunt-autoprefixer": "~0.7.6",
    "grunt-banner": "~0.2.3",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-concat": "~0.4.0",
    "grunt-contrib-connect": "~0.8.0",
    "grunt-contrib-copy": "~0.5.0",
    "grunt-contrib-csslint": "~0.2.0",
    "grunt-contrib-cssmin": "~0.10.0",
    "grunt-contrib-jade": "~0.12.0",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-less": "~0.11.3",
    "grunt-contrib-qunit": "~0.5.1",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-watch": "~0.6.1",
    "grunt-csscomb": "~2.0.1",
    "grunt-exec": "~0.4.5",
    "grunt-html-validation": "~0.1.18",
    "grunt-jekyll": "~0.4.2",
    "grunt-jscs-checker": "~0.6.0",
    "grunt-saucelabs": "~8.1.0",
    "grunt-sed": "~0.1.1",
    "load-grunt-tasks": "~0.6.0",
    "markdown": "~0.5.0",
    "npm-shrinkwrap": "~3.1.6",
    "time-grunt": "~0.3.2"
  },

これで、Gruntのコマンドを利用できるようになります。

4. コンパイル

以下のコマンドを実行しましょう。


grunt watch (Watch)

そしてlessファイルの編集をはじめてください。
lessファイルに変更があったら、自動的にコンパイルしてくれます。

grunt.png

5.注意点

今回、Grunt.jsには何も手を加えていません。

そのため、コンパイル成功時に出力されるcssファイルは以下のとおりでした。

Execution Time (2014-10-16 05:47:47 UTC)
less:compileCore   2.1s  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 98%
less:compileTheme  40ms  ▇▇ 2%
Total 2.2s

Completed in 4.626s at Thu Oct 16 2014 14:47:49 GMT+0900 (JST) - Waiting...
>> File "less/theme.less" changed.
Running "less:compileCore" (less) task
File dist/css/bootstrap.css.map created.
File dist/css/bootstrap.css created: 131.68 kB → 131.72 kB

Running "less:compileTheme" (less) task
File dist/css/bootstrap-theme.css.map created.
File dist/css/bootstrap-theme.css created: 2.44 kB → 2.49 kB

Done, without errors.

/dist/css/ディレクトリのうち☆がついたものだけがコンパイル、出力されます。


☆bootstrap-theme.css
☆bootstrap-theme.css.map
bootstrap-theme.min.css
☆bootstrap.css
☆bootstrap.css.map
bootstrap.min.css

そのためindex.htmlで読み込むcssはmin.cssではないほうにして実行してください。
min.cssを作成うるのは何かオプションが必要なのかもしれません。

(おまけ)連載しています

東洋経済オンラインで、「エンジニア夫婦のあるある日記」を連載中です!

■過去の連載記事はこちら
http://t.co/RzQWoQUbJ2

Sep1_bohebohe.jpg

bohebohechan
developer & founder of First Four Notes, LLC. I write 4 panel comic on Toyo-Keizai Online. http://toyokeizai.net/category/diary
https://firstfournotes.com/
firstfournotes
「音楽を演奏する人」、「音楽を聴く人」をソフトウエアとIoTの力で、より幸せにすることを目指してます。
https://firstfournotes.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away