sass version can't be used with sass-loader (webpack) - external deps missing tilde

[himdel]

When building with webpack (sass-loader), and using the sass variant, the build is failing because external dependencies are not distinguished from relative paths and the loader has no way of telling.

sass-loader imports docs mentions that external packages should be prefixed with a tilde (~). Anything else is a relative path.

Thus, doing..

@import "~@manageiq/font-fabulous/assets/stylesheets/_font-fabulous.scss";

fails with...

ERROR in ./app/stylesheet/application-webpack.scss (./node_modules/css-loader??ref--8-1!./node_modules/postcss-loader/lib??ref--8-2!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--8-4!./app/stylesheet/application-webpack.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "bootstrap/variables";
^
      File to import not found or unreadable: bootstrap/variables.
      in /home/himdel/manageiq-ui-classic/node_modules/patternfly/dist/sass/_patternfly.scss (line 7, column 1)

Forcing a different path won't help, because the same file is including both patternfly/variables (local subdirectory in the script dir) and bootstrap/normalize (a path under a bootstrap package external).

Either I'm missing an obvious way of telling sass-loader a list of hardcoded path prefixes to be treated differently, or it's currently impossible to consume patternfly sass via webpack.

[martinpovolny]

FYI: @h-kataria

[himdel]

Looks like this is a way of making patternfly work with sass-loader - relative path imports can be used as long as those paths can be found in sass-loader options includePaths:

includePaths: [
  path.resolve(__dirname, '../../node_modules', 'bootstrap-sass', 'assets/stylesheets'),
  path.resolve(__dirname, '../../node_modules', 'font-awesome-sass', 'assets/stylesheets'),
],

(After that, only the problem of image paths remains, I think, which is solved by loading the sprockets helper even in non-sprockets environment - that is, the font paths are broken without $pf-sass-asset-helper: true;)