I want to customize bootstrap to my needs, and I'm trying to use webpack to inject my CSS as a link tag.

I've installed:

• webpack
• mini-css-extract-plugin
• sass
• node-sass
• sass-loader
• css-loader

And this is what I have tried so far:

// I want to take the content of custom-bootstrap, and inject it as a link tag.
{
  include: resolve('src/scss/custom-bootstrap.scss'),
  use: [
    MiniCssExtractPlugin.loader, // 3. Injects the styles into a link tag.
    //"style-loader", // 3. Injects styles into the DOM.
    "css-loader", // 2. Turns css into js.
    "sass-loader", // 1. Turns sass into css.
  ]
}

The contents of custom-bootstrap.scss looks like this:

@import "~bootstrap/scss/bootstrap";

I also have another webpack rule (/\.(sc|c)ss$/i) very similar to the one above with is to handle every other style in the app. It looks like this:

{
  test: /\.(sc|c)ss$/i,
  exclude: resolve('src/scss/custom-bootstrap.scss'),
  use: [
    // MiniCssExtractPlugin.loader, // 3. Injects the styles into a link tag.
    "style-loader", // 3. Injects styles into the DOM.
    "css-loader", // 2. Turns css into js.
    "sass-loader", // 1. Turns sass into css.
  ]
}

When I run webpack I get the following error:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
2 │       import API from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";.

Anyone knows how to solve this? I also tried to use a a path to the node_modules instead of using the ~ syntax in the scss file, but without luck. Any help will be appreciated. :)