shakacode / sass-resources-loader

SASS resources (e.g. variables, mixins etc.) loader for Webpack. Also works with less, post-css, etc.

Repository from Github https://github.comshakacode/sass-resources-loaderRepository from Github https://github.comshakacode/sass-resources-loader

Why does `rewriteImports` not support paths outside `__dirname(file)`?

tombh opened this issue · comments

I'm using Google's Material Design framework and decided to try to use sass-resources-loader because I hear that importing mixins directly in my SCSS files degrades build times (is this true?). However, it seems that all of the mixins in the framework import other shared mixins and variables from elsewhere in the framework's tree. For example:

@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";

@mixin mdc-tab-bar-core-styles($query: mdc-feature-all()) {
  // postcss-bem-linter: define tab-bar
  .mdc-tab-bar {
    @include mdc-tab-bar-width(100%, $query);
  }
  // postcss-bem-linter: end
}
// snip ...

Such paths are imported by sass-resources-loader as: ../../node_modules/@material/tab-bar/@material/feature-targeting/mixins. Notice how the path to import is appended to the file's base path. I'm surprised that nobody else has had this problem. Maybe I'm doing something wrong? Or maybe Google's Material Design framework is the only framework that shares mixins like this?

I suppose the only fix is to support an OS-style $PATH array? Or to check if the path it import starts with ./?

Here is the current rewrite code in this repo for reference:
https://github.com/shakacode/sass-resources-loader/blob/master/src/utils/rewriteImports.js#L26

@tombh any update?

I stopped using this project :(