Storybook with vue - SassError: Undefined variable

Question

I am using storybook with Vue. I have some common SCSS I want to use.

I am using the addon in **main.js**

  addons: [

    '@storybook/preset-scss'
  ],

This seems to automatically pick up ./src/scss/variables.scss which for testing I have added

body {
  border: 10px solid green;
}

This works and hot reloads too the issue is any variables are not found in my components.

So my story list.stories.js imports the list component

import List from '../components/List.vue'

but within the style block I am trying use a var from the variables.scss.

<style lang="scss" scoped>
.list {
  border: 1px solid  $light-blue;
 
}
</style>

And get the error

SassError: Undefined variable: "$light-blue".
        on line 204 of components/src/components/List.vue
>>   border: 2px solid  $light-blue;

Answer 1

In main.js add sass-loader to webpack config:

module.exports = {
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      loaders: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: '../src/scss/variables.scss',
          },
        },
      ],
    });
    return config;
  }
}

It works with installed css-loader@5, sass-loader@10 and style-loader@2.

Answer 2

If scss is not working, then you can load styles by creating preview-head.html file at config/storybook/preview-head.html

And then just load your CSS there. For example:

<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/css/media-screen.css">

Make sure to restart Storybook dev server. npm run storybook:serve