nuxtjs, vue-bootstrap with custom bootstrap build

_Instructions

1. Install bootstrap as a dev dependency, and its dependencies (node-sass and sass-loader)
  `npm install --save-dev [email protected] node-sass sass-loader`
 
2. Install nuxt plugin of bootstrap vue (includes bootstrap-vue as a dependency)
  `npm install @nuxtjs/bootstrap-vue`

3. Register plugin as module in nuxt.config.js (see below)

4. Create app.scss entry point (see below)

5. Add app.scss entry point file to `css` setting in nuxt.config.js (see below)

6. Configure postcss:

  - Create a postcss.config.js file next to package.json (repo root) (see below)
  - Update package.json with supported browsers list as per what bootstrap or yourself use (see below)
  - Install those plugins for dev build: `npm install --save-dev precss autoprefixer`

Optimizations:
7. Use app2.scss to only import css you need.
7. Don't use module registration/plugin installer, simply call Vue.component/Vue.directive on things you want, 
or even just load per component in your own components as needed with import.

app.scss

// Option A: Include all of Bootstrap

// Customizations
$body-bg: #000;
$body-color: #111;

// All of bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

app2.scss

// Option B: Include parts of Bootstrap

// Customizations
$body-bg: #000;
$body-color: #111;

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

nuxt.config.js

module.exports = {
  css: [
    '@/assets/scss/app.scss' // use our build, as entered via app.scss
  ],
  modules: [
    ['@nuxtjs/bootstrap-vue', { css: false }] // don't include a default build, use ours
  ]
}

package.json

{
  "dependencies": {
    "@nuxtjs/bootstrap-vue": "^2.0.4"
  },
  "devDependencies": {
    "autoprefixer": "^7.2.3",
    "bootstrap": "^4.0.0-beta.2",
    "node-sass": "^4.7.2",    
    "precss": "^2.0.0",
    "sass-loader": "^6.0.6"
  },
  "browserslist": [
    "Chrome >= 45",
    "Firefox ESR",
    "Edge >= 12",
    "Explorer >= 10",
    "iOS >= 9",
    "Safari >= 9",
    "Android >= 4.4",
    "Opera >= 30"
  ]
}

postcss.config.js

// This will be merged with Nuxt's defaults as you can see in their source:
// https://github.com/nuxt/nuxt.js/blob/c55df0796832339f6c132fb76a266acc6b9f249b/lib/common/options.js#L94

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  'plugins': {
    'precss': { },
    'autoprefixer': { }
  }
}