Does not work with sass-loader

[mastermsd]

Hi!

Thank you for this addon. I would like to use this with sass-loader.

import light from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-light.scss';
import dark from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-dark.scss';

No errors appeared when I run this, yet it is not working. Please advise. Thank you!

[gavmck]

Can you show us the rest of the file?

[mastermsd]

Sure!

// preview.js
import { addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';
import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'

import light from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-light.scss';
import dark from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-dark.scss';

addDecorator(withKnobs, cssVariablesTheme);

export const parameters = {
  cssVariables: {
    files: {
      light,
      dark,
    }
  }
}

[gavmck]

Thanks! It doesn't look like you are passing the light and dark theme into the parameters

Can you try this

// preview.js
import { addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';
import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'

import light from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-light.scss';
import dark from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-dark.scss';

addDecorator(withKnobs, cssVariablesTheme);

export const parameters = {
  cssVariables: {
    files: {
      light,
      dark,
    }
  }
}

[mastermsd]

Thanks! It doesn't look like you are passing the light and dark theme into the parameters

Can you try this

// preview.js
import { addDecorator } from '@storybook/angular';
import { withKnobs } from '@storybook/addon-knobs';
import cssVariablesTheme from '@etchteam/storybook-addon-css-variables-theme'

import light from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-light.scss';
import dark from '!style-loader?injectType=lazyStyleTag!css-loader!sass-loader!./styles-dark.scss';

addDecorator(withKnobs, cssVariablesTheme);

export const parameters = {
  cssVariables: {
    files: {
      light,
      dark,
    }
  }
}

My apologies! There were some typo's in my previous comment. I've updated it. So with the updated comment it is not working.

[gavmck]

That still looks like it's passing kl, af as the CSS variables files, which don't exist?

export const parameters = {
  cssVariables: {
    files: {
      kl, // should be light,
      af // should be dark
    }
  }
}

[mastermsd]

Yes @gavmck, I've updated my comment, but still not working passing the correct file names

[gavmck]

Do you get the dropdown in canvas view? Do any of the styles load? Where are styles-light and styles-dark kept? How are you verifying if it's working or not working?

Your comment doesn't show the correct filenames for me 🤷

[gavmck]

Is there a simple repro repo for this?

[mastermsd]

Apologies! I thought I updated it, but it wasn't. It should be updated now.

Yes, the dropdown is showing in canvas with the options light and dark, but no styles are loaded.

The location of the scss files I kept in /.storybook folder. I've no doubt that the location is wrong, otherwise I would get an error that it could not resolve the scss file.

[gavmck]

Ok and nothing happens when you change the drop-down?

What styles are you expecting to load? Presumably some CSS variables?

[mastermsd]

Correct, nothing happens when I change the drop-down.

Not only SASS variables are expected, but also different assets are expected. Like different font file, icons etc. The styles are very different from each other.

[gavmck]

Can you set up a reproduction repo? I'm using this on a few projects with sass loader without issue.

[mastermsd]

Unfortunately it's a private repo, but I'll see what I can do to reproduce this in a clean new project.

[gavmck]

Thanks, if you can get a clean version set up I can have a better poke at it.

[gavmck]

@mastermsd We figured this out with @mikeedwards83 in his issue.

Decorators need to be added individually, not in one call.

addDecorator(withKnobs);
addDecorator(cssVariablesTheme);