0

I've downloaded an angular starter and I'm trying to install Bootstrap on it. They explain how to do that in the External Stylesheet section.

I've installed bootstrap:

npm i bootstrap --save
npm i bootstrap-sass --save

and then added in the top of styles.scss:

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

But it's marked with red mentions:

Cannot resolve directory 'bootstrap'

Any help will be profoundly appreciated!

Alon
  • 10,381
  • 23
  • 88
  • 152
  • And you're sure that, relative to your scss page, that's the correct directory? Like, bootstrap is in a folder called bootstrap in the same directory as your scss? – R. McManaman May 23 '17 at 13:32
  • 2
    Use a relative path to the bootstrap directory from your styles.scss file. Since you used npm to install it, it should probably be something like @import '../node_modules/bootstrap/scss/bootstrap.scss' – Steve May 23 '17 at 13:34
  • @R.McManaman I'm sure it's not. It's supposed to be somewhere globally. I just followed the instructions of the repository creator. – Alon May 23 '17 at 13:35
  • I would follow @Steve's advice, and then double check the npm install documentation. Looking at the link in your post, I think it might have implied a process for installing bootstrap globally and then running npm install in your specific directory. To be clear, you should `npm install -g bootstrap`, then in your scss directory run `npm install` to create a `package.json`. This is all semantics, though, and @Steve's advice should work fine. – R. McManaman May 23 '17 at 13:40
  • Try removing the `.scss` extension – Ishio May 23 '17 at 13:45
  • @Steve it produces another errors: now in run-time I get many errors complaining that it doesn't find "../fonts/bootstrap/glyphicons-halflings-regular.eot" and stuff like that in the directory where my styles.scss is located. It doesn't seem like a complete solution to this problem. – Alon May 23 '17 at 14:02

3 Answers3

2

As previously mentioned, you need to add the tilde when you're importing inside your css.

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

Second, the bootstrap css file is loading fonts along with the stylesheet, resulting in the error you're having because it's using relatives paths webpack doesn't know where to pickup.

To fix that, you could either change the path of the folder to the correct one like the following as seen from here:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

And add the fonts loader to your webpack configuration:

{
  test: /\.(eot|svg|ttf|woff|woff2)$/,
  loader: 'url-loader',
}

But the easiest way for you to get around the problem would be to remove the style import you are doing, remove the bootstrap-sass dependency and use the cdn instead.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

The advantage of doing this is that clients that have already downloaded bootstrap using this cdn will get the cached version. Since a lot of websites theses days use it, It's very likely they won't have to download it again, and it also saves you the trouble of hosting it or incorporating into your bundle.

Preview
  • 35,317
  • 10
  • 92
  • 112
1

Nothing exists at src/styles/bootstrap/scss/bootstrap.scss, so you can either manually copy/paste (or download) a bootstrap.scss file there OR just import bootstrap into your src/styles/styles.scss from your node_modules via:

@import "~bootstrap-sass/assets/stylesheets/bootstrap";

You'll get font-related errors until you add in a line before that so your styles.scss reads:

$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

More: https://stackoverflow.com/a/35575175/3814251

therobinkim
  • 2,500
  • 14
  • 20
0

In order to let sass-loader import a sass module from mode_modules folder, prepend the module path with a ~. Otherwise the provided path is resolved like a relative one:

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

For more info check out sass-loader docs.

Andrea Carraro
  • 9,731
  • 5
  • 33
  • 57
  • This is not the right path. The right one (at least in my project) is "~bootstrap-sass/assets/stylesheets/bootstrap.scss". Anyway when I do so, I get another error: File to import not found or unreadable: ~bootstrap-sass/assets/stylesheets/bootstrap.scss. Parent style sheet: stdin. – Alon May 24 '17 at 11:51
  • Sorry this error was because I'd had a typo. I've fixed it and now I'm getting the same error like I told to Steve in the comments above. I get many errors complaining that it doesn't find "../fonts/bootstrap/glyphicons-halflings-regular.eot" and stuff like that in the directory where my styles.scss is located. It doesn't seem like a complete solution for this problem. – Alon May 24 '17 at 12:54