webpack lektor bootstrap scss @import paths

249 views Asked by At

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.

0

There are 0 answers