I need to override some things in Bootstrap (3.3.7) CSS, so I need to load Bootstrap before all my other styles in order to do that. I understand the way to do that is to import it in my application's main styles.sass at the top of the document. But when I do this via:
@import ./bootstrap.css
I get:
ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.eot' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./src/bootstrap.css 6:4445-4497 6:4520-4572
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff2' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./src/bootstrap.css 6:4622-4676
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.woff' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./src/bootstrap.css 6:4707-4760
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.ttf' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./src/bootstrap.css 6:4790-4842
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./src/bootstrap.css
Module not found: Error: Can't resolve '../fonts/glyphicons-halflings-regular.svg' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./src/bootstrap.css 6:4876-4928
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
@ ./src/styles.sass
@ multi ./src/styles.sass
That didn't work because I didn't bring the fonts into the project.
That made me think there must be a more proper way to install bootstrap.
So then I found bootstrap-sass, and imported it using npm install bootstrap-sass --save, and then imported it into styles.sass with:
@import ../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss
And I get:
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.eot' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4253-4315 6:4338-4400
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff2' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4452-4516
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.woff' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4549-4612
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.ttf' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4644-4706
@ ./src/styles.sass
@ multi ./src/styles.sass
ERROR in ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass
Module not found: Error: Can't resolve '../fonts/bootstrap/glyphicons-halflings-regular.svg' in '/Users/bradley/Work/dashboard/src'
@ ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/styles.sass 6:4742-4804
@ ./src/styles.sass
@ multi ./src/styles.sass
Shouldn't there just be a clean way to do this?
I've come to learn Bootstrap for Sass has a variable just for this that directs it to where the fonts are. If they were installed with npm install bootstrap-sass --save, then you would want to import bootstrap-sass with these two lines at the top of your styles.sass:
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/"
@import ../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss