Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
nuxtjs, vue-bootstrap with custom bootstrap build
1. Install bootstrap as a dev dependency, and its dependencies (node-sass and sass-loader)
`npm install --save-dev bootstrap@4.0.0-beta.2 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.
// Option A: Include all of Bootstrap
// Customizations
$body-bg: #000;
$body-color: #111;
// All of bootstrap
@import "node_modules/bootstrap/scss/bootstrap";
// 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";
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
]
}
{
"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"
]
}
// 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': { }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.