Weird relative path behaviour about bootstrap-sass-loader

[hedefalk]

Hm, can't seem to reproduce in simple project so it's definitely something I do wrong. Or maybe version differences. This is the error I get on my unfortunately closed source project:

~/dev/projects/kostbevakningen $ webpack --display-error-details
[bootstrap-sass-loader]: styleLoader: style-loader!css-loader!sass-loader
[bootstrap-sass-loader]: bootstrap-sass location: ../../node_modules/bootstrap-sass/assets
[bootstrap-sass-loader]: Setting: $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
[bootstrap-sass-loader]: fileName for mainSass: ../../_kostbevakningen-bootstrap.scss
Hash: 09d93d3636a81d4cf8b5
Version: webpack 1.12.1
Time: 1683ms
              Asset    Size  Chunks             Chunk Names
      beta.entry.js  340 kB       0  [emitted]  beta
statistics.entry.js  175 kB       1  [emitted]  statistics
   [4] ./app/bootstrap/kostbevakningen-bootstrap.js 54 bytes {0} [built]
    + 88 hidden modules

ERROR in ./~/css-loader!./~/sass-loader!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./app/bootstrap/bootstrap-sass.config.js
Module build failed:
    'component-animations': true,
       ^
      File to import not found or unreadable: ../../_kostbevakningen-bootstrap.scss
      in /Users/viktor/dev/projects/kostbevakningen/app/bootstrap/bootstrap-sass.config.js (line 41, column 9)
Error:
    'component-animations': true,
       ^
      File to import not found or unreadable: ../../_kostbevakningen-bootstrap.scss
      in /Users/viktor/dev/projects/kostbevakningen/app/bootstrap/bootstrap-sass.config.js (line 41, column 9)
  at options.error (/Users/viktor/dev/projects/kostbevakningen/node_modules/node-sass/lib/index.js:276:32)

 @ ./~/style-loader!./~/css-loader!./~/sass-loader!./~/bootstrap-sass-loader/bootstrap-sass-styles.loader.js!./app/bootstrap/bootstrap-sass.config.js 4:14-211

Note the "../..". These are not there in config:

mainSass: './_kostbevakningen-bootstrap.scss',

For now I just made a

ln -s app/bootstrap/_kostbevakningen-bootstrap.scss ./_kostbevakningen-bootstrap.scss

and it works but it's really annoying.

[hedefalk]

Ok, so over here:

https://github.com/shakacode/bootstrap-sass-loader/blob/master/bootstrap-sass-styles.loader.js#L54

we're using Path.relative that takes two absolute paths to get a relative.

But the path I'm sending isn't absolute, right? The examples also gives relative:

mainSass: './_main.scss',

https://nodejs.org/api/path.html#path_path_relative_from_to

[hedefalk]

I added some debugging and got:

[bootstrap-sass-loader]: Loader.context: /Users/viktor/dev/projects/kostbevakningen/app/bootstrap
[bootstrap-sass-loader]: filename: ./_kostbevakningen-bootstrap.scss
[bootstrap-sass-loader]: path.relative(loader.context, fileName): ../../_kostbevakningen-bootstrap.scss
[bootstrap-sass-loader]: fileName for mainSass: ../../_kostbevakningen-bootstrap.scss

So I guess that particular function is used also later on for imports but maybe we could just resolve the path in config to an absolute first?

[hedefalk]

Oh, ok, I get it. The files are always relative root of webpack?

[hedefalk]

So I have a file

/Users/viktor/dev/projects/kostbevakningen/app/bootstrap/bootstrap-sass.config.js

but here I need to write:

mainSass: './app/bootstrap/_kostbevakningen-bootstrap.scss'

to get to

/Users/viktor/dev/projects/kostbevakningen/app/bootstrap/_kostbevakningen-bootstrap.scss

I would have thought the semantics would be that of require or @import that it's relative the file I'm writing in :)

[justin808]

@hedefalk Is there any issue still? Possibly can you give me a PR on what could improve the docs? Open source contributions are always appreciated! Thanks so much!

[hedefalk]

@justin808 I could get up and running once I realized that the path's where relative webpack.config.js and not the file they're defined in.

I'll get back with a PR if I can get relative paths working better. Thanks!

[justin808]

Thanks @hedefalk! I hope you enjoy the module.