Bit: Resolve custom tilde @import aliases in SCSS files

[NielsJanssen]

I'm building a set of Vue components which come bundled with some SCSS, most of which import some global SCSS file. This works fine when importing using relative paths, but when using a resolver alias it doesn't.

Expected Behavior

The following code should resolve the file when the scss alias is defined in the resolveModules.aliases section in the bit.json file.

@import "~scss/partials/palette";

Actual Behavior

An error is thrown indicating the file can't be found.

error: bit failed to build ui/[email protected] with the following exception:
Module build failed: 
@import "~scss/partials/palette";
^
      File to import not found or unreadable: ~scss/partials/palette.

Steps to Reproduce the Problem

1. Configure an alias to a directory containing SCSS files in bit.json
2. Create an SCSS file importing another SCSS file using the configured alias (eg. @import "~scss/colors";)
3. Import SCSS file from a JS file (eg. import 'style.scss';)

Specifications

• Bit version: 13.0.0
• Node version: v10.5.0
• npm / yarn version: 1.6.0
• Platform: macOS 10.13.5
• Bit compiler (include version): bit.envs/bundlers/[email protected]
• Bit tester (include version): -

Possible solution?

Pass the resolve aliases to the compile function to allow it to deal with the aliased paths.

[itaymendel]

oops, I misread the issue and closed it by mistake, reopening it.

[GiladShoham]

@davidfirst I believe this is an issue with the CSS detector (maybe we are not passing the resolve modules to this detector?)
We also need to verify that this case is working as expected after importing the component (make sure we won't create some double tilde in one of the files since we create binding files with tilde already)

[davidfirst]

@NielsJanssen , do you mind pasting here your resolveModules configuration?

I believe that removing the Tilda from that config should solve the issue (see an example below). It probably happens due to some logic that strips Tilda from scss/css files. (see this PR https://github.com/teambit/bit/issues/900 for more info).

I have tried something similar to the steps described above and it works with the configuration below.

My file tree:
src/app.js => import 'scss/styles.scss';
src/scss/styles.scss => @import "~scss/colors";
src/scss/colors.scss => ``

Here is my bit.json resolveModules config:

"resolveModules": {
        "aliases": {
            "scss": "src/scss"
        }
    }

Notice that the Tilda is not part of the alias.

[davidfirst]

Some work was done around this last month and it's released already.
The behavior of Bit is very similar to Webpack. In short, there are two cases:

Edit: This behavior has been changed. Please refer to this comment for the most updated one.

1. the name is right after the Tilda without a slash, e.g. ~scss/colors. In this case, the Webpack Sass Loader tries to resolve the module from `node_modules. (see here for more info https://github.com/webpack-contrib/sass-loader).
2. there is a slash after the Tilda, e.g. ~/scss/color. In this case, Bit will search the alias ~ inside the custom-resolve-modules configuration in bit.json. (see this Bit doc for more info https://docs.bitsrc.io/docs/troubleshooting-isolating.html#configuring-custom-module-resolution).

I'm closing the issue. Please reopen if the behavior is different than the two above.

[drewdecarme]

I just had a similar issue where bit wasn't recognizing a URL in my sass partial when I was trying to check the status

missing packages dependencies (use your package manager to make sure all package dependencies are installed): 
          src/styles/scss/static/_fonts.scss -> http:

I was using sass to import the following:

// src/styles/scss/static/_fonts.scss

@import "http://location-of-font-file.com"

I used the example above to create an alias that pointed back at the file and it seems to have been resolved:

New syntax:

// src/styles/scss/static/_fonts.scss

@import "fonts";

// bit.json

{
  "resolveModules": {
    "aliases": {
      "fonts": "src/styles/scss/static/_fonts.scss"
    }
  }
}

[GiladShoham]

@drewdecarme Thanks for reporting this.
This is a bug, and we will fix it soon and update this issue.

[GiladShoham]

@drewdecarme I couldn't reproduce your issue with the http.
Can you please create some gist / repo with all the necessary files to reproduce this?
Also please try with the latest version of bit (14.0.3).
Thanks

[drewdecarme]

@GiladShoham I tried putting into a Gist to reproduce this, but it appears that after upgrading to 14.0.3 it seemed to be working. I have a Sass component that contained the same http import and hasn't gotten any errors so far!

I think I was on 14.0.1 when I reported my issue.

[GiladShoham]

@drewdecarme Thanks for the update. closing.