Pass resolved_paths as includePaths to sass-loader

[khiav223577]

I have a scss file app/assets/stylesheets/animations/frame5.scss in which it imports the other scss file app/assets/stylesheets/_global_mixins.scss

// app/assets/stylesheets/animations/frame5.scss
@import 'global_mixins'; 

@include keyframes(frame5) {
  from { background-position: 0 0; }
  to { background-position: -500% 0; }
}

// app/assets/stylesheets/_global_mixins.scss
@mixin keyframes($animationName){
  @-webkit-keyframes #{$animationName}{@content;}
  @-moz-keyframes #{$animationName} {@content;}
  @-o-keyframes #{$animationName} {@content;}
  @keyframes #{$animationName} {@content;}
}

Recently, I wanted to import frame5 in my react-css-modules.
I added stylesheets path to config/webpacker.yml

// config/webpacker.yml
resolved_paths:
    - 'app/assets/stylesheets'

The following is my react component's css module:

// app/javascript/components/Card/style.scss
@import 'animations/frame5';

.card-effect {
  animation: frame5 .5s 1.7s steps(5) forwards;
}

But I got a compile error:

ERROR in project_root/app/assets/stylesheets/animations/frame5.scss (./node_modules/css-loader/dist/cjs.js??ref--8-1!./node_modules/postcss-loader/src??ref--8-2!./node_modules/sass-loader/lib/loader.js??ref--8-3!project_root/app/assets/stylesheets/animations/frame5.scss 
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import 'global_mixins'; // File to import not found or unreadable: global_mixins.
^
      File to import not found or unreadable: global_mixins.

I tried different names, and
@import '../global_mixins'; works.
@import '_global_mixins'; works.
@import 'global_mixins'; fails.
@import './global_mixins'; fails.

It is so strange.

After a day of tracing, I think it is because rails/webpacker doesn't includepaths to sass-loader ( then includepaths will be passed to node-sass by sass-loader)
See the document:
https://github.com/sass/node-sass#includepaths

This PR fixes the problem mentioned above.

[gauravtiwari]

thanks