Setup Sass for theming Bootstrap

[guylepage3]

Description
We need to setup Sass and a Sass compiler for theming Bootstrap.

Basic Sass Build Tasks

• Choose Sass file structure
• Setup Sass
• Import new Sass and Bootstrap
• Test

Advanced Sass Build Tasks

• Group Sass and Sass maps. Then setup import.
• Choose build process
• Choose and install Sass compiler
• Add minification capability to build process for clean CSS
• Merge build compiler and scripts into one bash command npm start Setup Sass for theming Bootstrap #25 (comment)
• Test

[guylepage3]

Set up basic Sass system and imports by

1. Global install of Sass
2. Import Bootstrap's Sass into src/App.scss
3. Replace Bootstrap's CSS in src/index.js with App.css
4. Then run sass src/App.scss src/App.css

This produces a large App.css file..

[guylepage3]

Chosen compiler is Webpack

• https://stevenwestmoreland.com/2018/01/how-to-include-bootstrap-in-your-project-with-webpack.html
• https://getbootstrap.com/docs/4.0/getting-started/webpack/

[guylepage3]

Ran into issue with ejecting React app.

[guylepage3]

Attempting to modify Facebook's Create React App Method

Reference:

• Sass: Adding Bootstrap with a Custom Theme facebook/create-react-app#2801 (comment)

Facebook/create-react-app/ Issue reference:

• Sass: Adding Bootstrap with a Custom Theme facebook/create-react-app#2801

[guylepage3]

Added minification of CSS by adding the --output-style compressed command to the package.json build scripts.

"build-css": "node-sass-chokidar src/ -o src/ --output-style compressed",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --output-style compressed --watch --recursive",

Reference:

• https://stackoverflow.com/questions/40579330/minify-css-with-node-sass

[guylepage3]

Merge build compiler and scripts into one bash command running npm install --save npm-run-all package.

Reference:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

[guylepage3]

Complete