Bootstrap Design Components for BaseCMS NextJS Websites
Adds Bootstrap component support for BaseCMS NextJS websites.
Installation
This package requires the @base-cms/nextjs-web
package, along with its peer dependencies. To install:
yarn add @base-cms/nextjs-web @base-cms/nextjs-web-bootstrap bootstrap [...additional peers]
Setup
Next Config
Once installed, add the following to your next.config.js
:
// next.config.js
const withSass = require('@base-cms/nextjs-web-bootstrap/next-config');
const withWebsite = require('@base-cms/nextjs-web/next-config');
module.exports = withSass(withWebsite({
// additional config options...
}));
PostCSS + Autoprexifer Config
You must also create a postcss.config.js
file in your project root. This adds support for the Autoprexifer plugin which Bootstrap requires.
// postcss.config.js
module.exports = (ctx) => {
const plugins = {
precss: {},
autoprefixer: {
...ctx.options.autoprefixer,
cascade: false,
},
};
return { plugins };
};
Browserlist
Finally, the Browserlist file .browserslistrc
must be created in the project root. The following demonstrates Bootstrap 4's current browser settings:
>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30
Usage
Once installed, create a SASS file of your choosing (generally in the site
folder) and import into your NextJS+BaseCMS website. For example...
// site/styles/app.scss
// Setup custom bootstrap variables here, or in an external file.
@import "~bootstrap/scss/bootstrap";
Then, inside the _app
page:
// site/pages/_app.jsx
import '../styles/app.scss';
import {
WebsiteApp,
withApollo,
withRouting,
withSiteConfig,
} from '@base-cms/website-nextjs/app';
// everything else...