How to setup loader for bootstrap for webpack ? or is there any better alternative than webpack?

Question

I am stuck in adding css-loader for my bootstrap to the webpack, help please.

My file structure:

style.scss

// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

index.js

import React from "react";
import ReactDOM from "react-dom/client";
// import 'bootstrap/dist/css/bootstrap.min.css';

// Import our custom CSS
import "../scss/styles.scss";
// import "!style!css!bootstrap/dist/css/bootstrap.min.css";

// Import all of Bootstrap's JS
// import * as bootstrap from "bootstrap";

import App from "./App";
import "react-toastify/dist/ReactToastify.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

webpack.config.js

const path = require("path");

module.exports = {
    entry: path.resolve(__dirname, "./src/index.js"),
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    { loader: "babel-loader" },
                    {
                        loader: "style-loader",
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            postcssOptions: {
                                plugins: () => [require("autoprefixer")],
                            },
                        },
                    },
                    {
                        loader: "sass-loader",
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ["*", ".js", ".jsx"],
    },
    output: {
        path: path.resolve(__dirname, "./public"),
        filename: "bundle.js",
    },
    devServer: {
        static: path.resolve(__dirname, "./public"),
    },
};

Error generated is

 ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].r [built] [code generated] [1 error]

ERROR in ./src/index.js (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/di./src/index.js)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
SassError: SassError: expected "{".
  ╷
1 │ import React from "react";
  │                          ^
  ╵
  src\index.js 1:26  root stylesheet
    at Object.loader (C:\Users\krisarya\My Profile\Github-krishnaacharya-official\vivans-web-frontend\node_modules\sass-loader\dist\index.js:56:14)
 @ ./src/index.js 7:0-203 14:17-24 16:7-21 42:25-39 43:36-47 43:50-64 44:188-51:5 45:52-63 45:66-80 49:34-45 49:48-62 50:13-20 57:0-179 57:0-179 58:15-22 58:26-40 58:43-57 
44:4-51:6

webpack 5.76.3 compiled with 1 error in 2291 ms

Answer 1

The sass-loader, css-loader, postcss-loader and style-loader should be applied to SCSS files, but you applied them to /\.(js|jsx)$/ files.

 module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            // Adds CSS to the DOM by injecting a `<style>` tag
            loader: 'style-loader'
          },
          {
            // Interprets `@import` and `url()` like `import/require()` and will resolve them
            loader: 'css-loader'
          },
          {
            // Loader for webpack to process CSS with PostCSS
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require("autoprefixer")
                ]
              }
            }
          },
          {
            // Loads a SASS/SCSS file and compiles it to CSS
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }

There is an official guide for how to include and bundle Bootstrap’s CSS and JavaScript in your project using Webpack.