webpackにBootstrapを導入した際のメモ

Bootstrapテーマで、適用したいcssの要素をoverrideする際にやったこと。

まずは、webpackのプロジェクトフォルダを作成。

$ vue init webpack vue-cli-sample

んで、諸々の依存関係をインストー

$ cd vue-cli-sample
$ npm install
$ npm install node-sass --save-dev
$ npm install sass-loader --save-dev
$ npm install bootstrap-sass --save-dev
$ npm install vue-strap --save-dev

App.vueに適用させたいcssをapp.scssファイルとして作成

$ mkdir src/assets/styles && touch src/assets/styles/app.scss

Bootstrapのoverride用のscssファイル(bootstrap-variable-overrides.scss)を出力

$ awk '{print "//" $0}' node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss > src/assets/styles/bootstrap-variable-overrides.scss

App.vueに適用させたいcssをimport

<style lang="scss">
  @import './assets/styles/app.scss';
</style>

Bootstrapで必要となる要素をapp.scssにimport

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import '~bootstrap-sass/assets/stylesheets/_bootstrap.scss';
@import 'bootstrap-variable-overrides';

最終的なscss構成のtree

src
└── styles
    ├── app.scss
    ├── bootstrap-variable-overrides.scss

配布されてるcssテーマを適用したい場合は、override用のscssファイル(bootstrap-variable-overrides.scss)に要素の値をぶち込んであげればOK

Bootstrap JS はNG

Vue.jsのTipsにjQueryの古臭い慣習からの脱却を目指すべく、Bootstrap JS はやめようとかいうことが書いてあった。

Using Bootstrap with Vue.js

このあたりのJS Components機能を補完するためには、ElementUIElementUI-Githubとか良さげ。