Error on sass importing

[scottnath]

I am attempting to use c-a-b in a project, but when I try to import any module, I get errors when my sass compiler tries to find the @import files. For instance if I add this to my project, which uses eyeglass:

@import 'carbon-addons-bluemix/components/interior-left-nav/interior-left-nav';

Then I get the following error:

Error in plugin 'gulp-sass'
Message:
    node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/_interior-left-nav.scss
Error: Error: Could not import carbon-components/scss/globals/scss/colors from any of the following locations:
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors.scss
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors.sass
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors.css
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/_colors.scss
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/_colors.sass
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/_colors.css
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors/index.scss
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors/index.sass
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors/index.css
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors/_index.scss
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors/_index.sass
     /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/carbon-components/scss/globals/scss/colors/_index.css
        on line 5 of node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/_interior-left-nav.scss
>> @import 'carbon-components/scss/globals/scss/colors';
   --------^

Details:
    status: 1
    file: /Users/my/project/root/node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/_interior-left-nav.scss
    line: 5
    column: 9

[asudoh]

@scottnath Thank you for writing up this report - Two things I can rattle off from my quick glance at the error log is the following:

1. Sass includePaths. setting
2. Resolving carbon-components peer dependency

Feel free to add more info if neither of above solves the issue. Thanks!

[jzhang300]

@asudoh I'm getting same errors.

I've updated includePaths like below:

And I have carbon-components@8.16.0 in my node_modules.

I'm still getting the error:

[asudoh]

@jzhang300 One thing to check is:

> cd /path/to/your-project
> ls -dl node_modules/carbon-components/scss/globals/scss/_colors.scss

It should locate https://unpkg.com/carbon-components@8.16.0/scss/globals/scss/_colors.scss.

If you are sure the _colors.scss file is in the right location and need further assistance, would you share your GHE repo link in our internal Slack? Thanks!

[jzhang300]

_colors.scss does exist:

Let me share the repo in Slack.

[mven]

I believe your import is missing scss in the path:

@import 'carbon-addons-bluemix/scss/components/interior-left-nav/interior-left-nav';

[jzhang300]

Somehow this is resolved automatically for me.

[scottnath]

@asudoh

This looks like an error in how you're importing the carbon-components in your sass:

@import 'carbon-components/scss/globals/scss/colors';
@import 'carbon-components/scss/globals/scss/vars';
@import 'carbon-components/scss/globals/scss/mixins';
@import 'carbon-components/scss/globals/scss/layer';
@import 'carbon-components/scss/globals/scss/typography';
@import 'carbon-components/scss/globals/scss/import-once';
@import 'carbon-components/scss/globals/scss/css--reset';
@import 'carbon-components/scss/globals/scss/css--typography';

The carbon-components' eyeglass settings point to the scss directory:

  "eyeglass": {
    "sassDir": "scss",
    "exports": false,
    "name": "carbon-components",
    "needs": "^1.2.1"
  }

which means that eyeglass is pointing the user to node_modules/carbon-components/scss, which means your imports should look like this:

@import 'carbon-components/globals/scss/colors';
@import 'carbon-components/globals/scss/vars';
@import 'carbon-components/globals/scss/mixins';
@import 'carbon-components/globals/scss/layer';
@import 'carbon-components/globals/scss/typography';
@import 'carbon-components/globals/scss/import-once';
@import 'carbon-components/globals/scss/css--reset';
@import 'carbon-components/globals/scss/css--typography';

@mven This wasn't an issue with my path as the eyeglass settings for this repo also point to the sass directory:

  "eyeglass": {
    "sassDir": "scss",
    "exports": false,
    "name": "carbon-addons-bluemix",
    "needs": "^1.2.1"
  }

problem: deprecation statement

The problem is that this also does not work when not trying to call the sass file without eyeglass:

@import '../../../node_modules/carbon-addons-bluemix/scss/components/interior-left-nav/interior-left-nav';

This still results in the error:

messageOriginal: Error: Could not import carbon-components/scss/globals/scss/colors from any of the following locations:
...

Which means we have to resort to using the version from carbon-components via:

@import '../../../node_modules/carbon-components/scss/components/interior-left-nav/interior-left-nav';

Which means we get the deprecation message:

WARNING:
REASON: Accessing the `card` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `detail-page-header` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `module` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `interior-left-nav` component from the `carbon-components`package is deprecated. Use the `carbon-addons-bluemix` package instead.
REASON: Accessing the `order-summary` component from the `carbon-components` package is deprecated. Use the `carbon-addons-bluemix` package instead.
         on line 117 of ../carbonbrot/node_modules/carbon-components/scss/globals/scss/styles.scss
         from line 2 of src/styles/variables/_common.scss
         from line 1 of src/styles/variables/_light.scss
         from line 2 of src/index.scss
         from line 6 of src/styles/design-system.scss

[asudoh]

Thanks @scottnath alot for your detailed report! From scratching the surface it sounds that the dev env of carbon-addons-bluemix does not use eyeglass nor take eyeglass usage into account, which may be something we can rectify.

[asudoh]

Recent discussions with @joshblack et al revealed that the style import should be from carbon-addons-cloud project instead. In case the JS code here don't work with the styles there issues can be submitted. Thanks!

[asudoh]

Issue moved to carbon-design-system/carbon-addons-cloud #72 via ZenHub