I am attempting to use bootstrap with lektor.
Following the instructions found here, everything worked as expected. I then used npm
to install jquery
and bootstrap
.
"Requiring" jquery and bootstrap in webpack/js/main.js
works without a hitch. However when I attempted to
@import "bootstrap";
in webpack/scss/main.scss
I got the following:
ERROR in ./~/css-loader!./~/sass-loader!./scss/main.scss
Module build failed:
@import "bootstrap";
^
File to import not found or unreadable: bootstrap.
Parent style sheet: stdin
in /home/lysdexia/Projects/thing/webpack/scss/main.scss (line 4, column 1)
This lead me to a bunch of not-very-helpful reading vis the node search path. I found that all three of the the following:
@import "/home/lysdexia/Projects/thing/webpack/node_modules/bootstrap/dist/css/bootsrap.css";
@import "/bootstrap/dist/css/boostrap.css";
@import "/bootstrap.css";
. . . all seem to import without errors. All the scss examples show a simple @import whatever;
which I now suspect may be shorthand for something, or an assumption of a different configuration.
Unfortunately, upon attempting to @extend
a class with a bootstrap class gives me a The selector ".row" was not found.
, which says to me that the import didn't actually work, and failed without an error.
I must admit some embarrassment and confusion here. Is there a way to examine node's search paths? It seems somewhat logical (if a bit wishy-washy) that "/" can mean "full path from root" or "my paths start in node_modules", but why /bootstrap.css
would even appear to work is just bizarre.