How to import bootstrap scss from node_modules?

[alma-socar]

I'm trying to import bootstrap.scss from node_modules/ to cherry-pick certain scss files.

:global {
  @import 'base';
  @import '~normalize.css/normalize';
  @import '~bootstrap/dist/css/bootstrap';
  // @import '../static/css/styles';

  // Some best-practice CSS that's useful for most apps
  // Just remove them if they're not what you want
  html {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
}

Changing core.scss file I could achieve this like above but there seemingly is no way to import scss itself. Can I do that?

[alma-socar]

Maybe I can do this by adding this line to CoreLayout.jsx

import 'bootstrap/scss/bootstrap.scss';

Am I doing right? Then how can I access pre-loaded scss files such as color variables?

@import './variables/colors';

/variables/_colors.scss looks like this.

$blue: #00d2ff;

This is what I've done at _base.scss. And I'm calling one of the variables from CoreLayout.scss like below.

.mainContainer {
  padding-top: 4rem;
}

.sideBar {
  background-color: $blue;
}

It shows..

ERROR in ./~/css-loader?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/postcss-loader!./~/sass-loader?sourceMap!./src/layouts/CoreLayout/CoreLayout.scss
Module build failed:
  background-color: $blue;
                   ^
      Undefined variable: "$blue".
      in /Users/alma/Development/zerocar-op/src/layouts/CoreLayout/CoreLayout.scss (line 6, column 21)
 @ ./src/layouts/CoreLayout/CoreLayout.scss 4:14-284 13:2-17:4 14:20-290

[nickwaelkens]

I also tried to cherry pick some files from Bootstrap4 and after a lot of hours of trial and error I went with bootstrap-loader. You choose files to be included in your build in the .bootstraprc file and you're pretty much all set. You can specify files to be loaded both before and after the bootstrap "compilation", so you can override variables with ease.

It's not really the perfect solution for your problem, but at least it works.

Install the loader and don't forget to add it your app's entry point;

const APP_ENTRY_PATHS = [
  // Polyfills for older browsers
  'babel-polyfill',
  // Bootstrap
  'bootstrap-loader',
  // Main app file
  paths.client('main.js')
];

Then just update your .bootstraprc file accordingly and add a preBootstrapCustomizations file if necessary.