solution • NodeJS — Bootstrap 4 and FontAwesome 5 via npm packages - martindubenet/wed-dev-design GitHub Wiki
This is a simple tutorial to refer as a vanilla set-up guide for a new bootstrap (v.4) project.
Tutorial references: How to customize Bootstrap v4 using node packages and Installing Bootstrap 4 Tutorial
$ cd ~/projects
$ mkdir project_folder
$ cd projects_folder
This next command will launch the utility that will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults.
$ npm init
-
package name: Leave_default_value -
version: Leave_default_value -
description: Describe this project -
entrey point: index.html -
test command: Leave_empty -
git repository: Optional -
keywords: Leave_empty -
author: My name -
licence: Leave_empty
- autoprefixer to add prefixes where needed.
- Bootstrap the latest version 4.x.
- clean-css to create minified versions.
- node-sass to compile scss/Sass to css.
- postcss to actually use autoprefixer.
- stylelint to check the code for mistakes.
$ npm install <package_name> -D.
Note: The trailing
-Dat the end of command lines is to identify it as part ofdevDependencyset
$ npm install [email protected]
$ npm install autoprefixer -D
$ npm install clean-css -D
$ npm install node-sass -D
$ npm install postcss -D
$ npm install stylelint -D
npm install node-sass clean-css-cli autoprefixer postcss-cli stylelint stylelint-scss stylelint-order stylelint-config-standard stylelint-config-recommended-scss watch -D && npm install [email protected]
Note: This browser-sync paclkage will setup a static server and allow us to designate when the browser reloads as we save files. Since it was not part of the initial tutorial I'll need to test if it conflicts with the other packages listed above.
Since jQuery is required by Bootstrap but is available via Google's Developpers Library CDN it is usualy a good practice to load in the the <head> on the HTML templates instead of loading it as an npm dependency.
Load it as you want it:
-
https://developers.google.com/speed/libraries/#jquery :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> - Or using npm :
$ npm install jquery -D
All those Style Lint Rules defined what is allowed and what will throw an error. For example, "max-empty-lines": 2 will throw an error if you have 4 empty lines between two lines of code.
- Create the empty file:
$ touch .stylelintrc - Copy/Paste the content of Bootstrap's linth file from GitHub within your local .stylelintrc file.
Postcss is required to run autopefixer which will add vendor prefixes when necessary, depending on the configuration you define.
To specify which browsers you wan’t to support you can add an array to the package.json file specifying version like this:
"browserslist": [
"last 1 major version",
">= 1%",
"Chrome >= 45",
"Firefox >= 38",
"Edge >= 12",
"Explorer >= 10",
"iOS >= 9",
"Safari >= 9",
"Android >= 4.4",
"Opera >= 30"
],
These are the default supported browsers by Bootstrap.
To make it possible to add prefixes when needed you need to create a postcss.config.js file and paste the following code within:
Create the file:
$ touch postcss.config.js
Copy/Paste this code:
'use strict'
//
module.exports = (ctx) => ({
map: ctx.file.dirname.includes('examples') ? false : {
inline: false,
annotation: true,
sourcesContent: true
},
plugins: {
autoprefixer: { cascade: false }
}
})
Now the tools are configured and we can run some scripts… but first we need some scss files. Easiest way, simply add a directory for the scss files and create import.scss where you will import all stylesheets, including Bootstrap from node_modules, and other project related stylesheet files. In that file import the bootstrap source files from the :
$ mkdir assets
$ cd assets
$ mkdir style
$ cd style
$ mkdir src
$ cd src
$ touch import.scss _bootstrap4.variables.scss _main.variables.scss _main.layout.scss
$ mkdir layout
$ cd layout
$ touch _main-header.scss _main-footer.scss
/*
* IMPORT
* Load
*/
@import '_main.variables';
@import '_bootstrap4.variables'; // load bootstrap sources within the project
@import '_main.layout';
@import 'layout/_main-header';
@import 'layout/_main-footer';