Setting up Bootstrap 4 SCSS with React webpack: A comprehensive guide

Question

Setting up Bootstrap 4 SCSS with React webpack: A comprehensive guide

Embarking on a new project with ReactJS ES6 and webpack.

Utilizing the react-static-boilerplate starter. My main query lies in how to import Bootstrap4 into the build process?

Avoiding the use of the generated bootstrap.css file, I aim to have webpack construct it instead. This way, I can easily modify its @variables, apply my theme, and more.

The initial steps involved cloning the boilerplate:

> git clone -o react-static-boilerplate -b master --single-branch \
      https://github.com/kriasoft/react-static-boilerplate.git MyApp
>cd MyApp && npm install

Installed bootstrap via npm.

npm install [email protected]

Upon requiring the primary bootstrap file into my index.js, it loads seamlessly. However, I'm curious about including the sass files of Bootstrap to kickstart customization. Any guidance on this front would be greatly appreciated.

css twitter-bootstrap reactjs webpack

Answer 1

Answer №1

To begin, start by acquiring the appropriate loader for scss files.

Install sass-loader using the following command:

npm install sass-loader --save-dev

Next, configure your webpack to handle all scss files. Here is how you can do it:

{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}

If encountering an error related to node-sass:

If you come across an error such as "cannot resolve node-sass," install it with:

npm i node-sass --save-dev

Now, when importing bootstrap.scss, webpack will bundle it for you:

import "bootstrap/scss/bootstrap.scss"

Customizing the styles:

For example, in your own scss file:

$btn-font-weight:bold;

Then, import the component you wish to override or the entire bootstrap.scss:

@import '~bootstrap/scss/bootstrap.scss';

In my scenario, style.scss looks like this:

$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

In your main.js file:

import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

This guide should help you reach your desired outcome!

A demo application I created can be found here

After running npm install, execute npm start and navigate to localhost:8080

Answer 2

To begin, start by acquiring the appropriate loader for scss files.

Install sass-loader using the following command:

npm install sass-loader --save-dev

Next, configure your webpack to handle all scss files. Here is how you can do it:

{test: /\.scss$/, loaders: [ 'style', 'css', 'sass' ]}

If encountering an error related to node-sass:

If you come across an error such as "cannot resolve node-sass," install it with:

npm i node-sass --save-dev

Now, when importing bootstrap.scss, webpack will bundle it for you:

import "bootstrap/scss/bootstrap.scss"

Customizing the styles:

For example, in your own scss file:

$btn-font-weight:bold;

Then, import the component you wish to override or the entire bootstrap.scss:

@import '~bootstrap/scss/bootstrap.scss';

In my scenario, style.scss looks like this:

$btn-font-weight:bold;
@import '~bootstrap/scss/bootstrap.scss';

In your main.js file:

import "bootstrap/scss/bootstrap.scss"
import "./style.scss"

This guide should help you reach your desired outcome!

A demo application I created can be found here

After running npm install, execute npm start and navigate to localhost:8080

Answer 3

Answer №2

Looks like the template is missing the sass-loader and isn't checking for .scss files.

To fix this, start by installing npm i sass-loader --save

Next, in the webpack config under the loaders section, add the following:

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// complete configuration object
const config = {
    // ...
    loaders: [
        // ...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    // ...
};

If you want to customize bootstrap's .scss variables, you can do so like this:

styles/app.scss

$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

In your main.js, remember to import the stylesheet

import "styles/app.scss";

It's worth mentioning that this solution is similar to one provided in this answer

Answer 4

Looks like the template is missing the sass-loader and isn't checking for .scss files.

To fix this, start by installing npm i sass-loader --save

Next, in the webpack config under the loaders section, add the following:

webpack.config.js

var path = require('path');
var nodeModules = path.resolve(path.join(__dirname, 'node_modules'));
// complete configuration object
const config = {
    // ...
    loaders: [
        // ...
        {
            test: /\.(css|scss)$/,
            include: [
                path.join(nodeModules, 'bootstrap'),
            ],
            loaders: ["style", "css", "sass"]
        }
    ]
    // ...
};

If you want to customize bootstrap's .scss variables, you can do so like this:

styles/app.scss

$brand-warning: pink !default;
@import '~bootstrap/scss/bootstrap.scss';

In your main.js, remember to import the stylesheet

import "styles/app.scss";

It's worth mentioning that this solution is similar to one provided in this answer

Answer 5

Answer №3

After making the switch to react-slingshot with webpack already configured for sass, you can streamline the process a bit. Simply add Bootstrap 4 using npm as follows:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e03031808190b02104d49475d434d435c55554887"><span class="__cf_email__" data-cfemail="7f161a1a01101002101434105846584605">[email protected]</span></a> --save

Next, in src/styles/styles.scss, include these two imports:

@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

This approach is similar to what @DanielDubovski has demonstrated, but it's considered more standard practice to have a separate file for bootstrap overrides. Removing the default settings is necessary since you'll be customizing Bootstrap's defaults and avoiding accidental alterations to your custom bootstrap colors. To begin working on src/styles/bootstrap-custom.scss, refer to node_modules/bootstrap/scss/_variables.scss for a comprehensive list of default variables. From there, you can select the variable names that require modification. Here's an example snippet from bootstrap-custom.scss focusing on greyscale color overrides:

/*
 * Custom overrides for Bootstrap defaults - additional overrides can be added here, consult node_modules/bootstrap/scss/_variables.scss for a full list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;

Answer 6

After making the switch to react-slingshot with webpack already configured for sass, you can streamline the process a bit. Simply add Bootstrap 4 using npm as follows:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e03031808190b02104d49475d434d435c55554887"><span class="__cf_email__" data-cfemail="7f161a1a01101002101434105846584605">[email protected]</span></a> --save

Next, in src/styles/styles.scss, include these two imports:

@import "./bootstrap-custom";
@import "~bootstrap/scss/bootstrap";

This approach is similar to what @DanielDubovski has demonstrated, but it's considered more standard practice to have a separate file for bootstrap overrides. Removing the default settings is necessary since you'll be customizing Bootstrap's defaults and avoiding accidental alterations to your custom bootstrap colors. To begin working on src/styles/bootstrap-custom.scss, refer to node_modules/bootstrap/scss/_variables.scss for a comprehensive list of default variables. From there, you can select the variable names that require modification. Here's an example snippet from bootstrap-custom.scss focusing on greyscale color overrides:

/*
 * Custom overrides for Bootstrap defaults - additional overrides can be added here, consult node_modules/bootstrap/scss/_variables.scss for a full list
 */

 $gray-dark:                 #333;
 $gray:                      #777;
 $gray-light:                #000;
 $gray-lighter:              #bbb;
 $gray-lightest:             #ddd;

Answer 7

Answer №4

Use this command to install the necessary dependencies for Sass in your project: 
npm install --save-dev sass-loader css-loader style-loader node-sass

To configure the usage of Sass in your webpack.config.js file, add the following code snippet:

 loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]

Answer 8

Use this command to install the necessary dependencies for Sass in your project: 
npm install --save-dev sass-loader css-loader style-loader node-sass

To configure the usage of Sass in your webpack.config.js file, add the following code snippet:

 loaders: [
     {
         test: /\.scss$/,
         loaders: [ 'style', 'css', 'sass' ]
     }
 ]

Answer 9

Answer №5

Although this isn't the original framework used by the OP, it has been updated since then. Now, it includes built-in SCSS compiling. If you're starting a new project and want to use this feature, importing it is quite straightforward: https://facebook.github.io/create-react-app/docs/adding-bootstrap

Answer 10

Although this isn't the original framework used by the OP, it has been updated since then. Now, it includes built-in SCSS compiling. If you're starting a new project and want to use this feature, importing it is quite straightforward: https://facebook.github.io/create-react-app/docs/adding-bootstrap

Setting up Bootstrap 4 SCSS with React webpack: A comprehensive guide

Answer №1

To begin, start by acquiring the appropriate loader for scss files.

If encountering an error related to node-sass:

Now, when importing bootstrap.scss, webpack will bundle it for you:

Customizing the styles:

In my scenario, style.scss looks like this:

In your main.js file:

This guide should help you reach your desired outcome!

A demo application I created can be found here

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Caption image on hover

Enable the ability for anchor links to be clickable when the CSS media print format is used to generate

Require the implementation of seamless scrolling when clicking on an anchor tag with a specific ID, as opposed to the abrupt jumping to the corresponding

What is causing the lack of category options to appear in the select menu?

Issue with React component not updating content after state changes in Next.js framework

Encountering the error "Compiled with issues" upon starting the react server

Using the componentDidUpdate lifecycle method to update the state in React

Set the width of the left div in percentage and have the right div automatically fill

Exploring techniques for monitoring untracked files within node_modules directory while focusing on distinguishing key elements

The integration of ag-grid webpack css is not reflecting on the website as intended

The Access-Control-Allow-Origin CORS header is missing in React JS, resulting in a status code of 401

Adjusting the image to fit the container based on its shorter side, regardless of the image's orientation

What is the reason for the varying sizes of my buttons and the irregular alignment of their contents?

Can you explain the functionality of this: http://welbog.homeip.net/ ?

React error: File undefined (cannot be exported)

In React hooks, you can easily deactivate an image element upon the first click on a toggle, and then reactivate it using setTimeout

Maintaining the size and proportions of an object as it

Ensure that the text inside the button does not exceed its boundaries (utilizing Bootstrap v4)

There was a problem retrieving the product information from the API

Tips for implementing a custom hook in the submission function of a React hook form