Storybook: Storybook vuejs scss global scss helper file not available via webpack

[cojok]

Describe the bug
There seems to be an issue in rendering the vue component, as I get alsway 'Undefined variable' for my scss variable from the style tag included in the vue file. This variable comes from a global helpers.scss, which is loaded in the vue app from webpack as loader scss data.

I have a vuejs setup done withe the vue-cli. I have added storybook to it manually, done like in the tutorial from learnstorybook.com

The vue-cli-plugin-storybook did also not helped me.

To Reproduce
Steps to reproduce the behavior:
Project setup:
|src
|---|components
|---|---|Component1
|---|---|---|Component1.vue
|---|---|---|Component1.story.js
|---|sass
|---|---|utils
|---|---|---|utils1.scss
|---|---|---|utils2.scss
|---|---|helpers.scss

My components are vue single file components. I have also some webpack custom settings like aliases and the global loader of the helpers.scss, so I don't have to include it in every component.

1. run $ npm run storybook
2. see the error:

ERROR in ./src/components/Error/Error.vue?vue&type=style&index=0&id=395d98a1&lang=scss&scoped=true& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Error/Error.vue?vue&type=style&index=0&id=395d98a1&lang=scss&scoped=true&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

        background-color: $colorRedNewsletterBtn;
                     ^
      Undefined variable: "$colorRedNewsletterBtn".
      in /Users/cojok/Sites/checkout/src/components/Error/Error.vue (line 23, column 23)
 @ ./src/components/Error/Error.vue?vue&type=style&index=0&id=395d98a1&lang=scss&scoped=true& (./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Error/Error.vue?vue&type=style&index=0&id=395d98a1&lang=scss&scoped=true&) 2:14-316 21:1-42:3 22:19-321
 @ ./src/components/Error/Error.vue?vue&type=style&index=0&id=395d98a1&lang=scss&scoped=true&
 @ ./src/components/Error/Error.vue
 @ ./src/components/Error/Error.stories.js
 @ ./src/components sync \.stories\.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

Expected behavior
I expected that storybook would render the component as in the normal setup. As i don't need to rewrite the components to manually add the helpers.scss in each one of them.

Code snippets
.storybook/webpack.config.js

const path = require('path')
const alias = {
  '@': path.join(__dirname, 'src'),
  'utils': path.join(__dirname, 'src/_utils'),
  'components': path.join(__dirname, 'src/components')
}
module.exports = async ({ config, mode }) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    ...alias
  }
  config.module.rules.push({
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, "../")
  });

  return config
}

.storybook/config.js

import { configure } from '@storybook/vue';
// // automatically import all files ending in *.stories.js
const req = require.context('../src/components', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

vue.config.js

const path = require('path')
module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `@import "@/sass/helpers.scss";`
      }
    }
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'),
        'utils': path.join(__dirname, 'src/_utils'),
        'components': path.join(__dirname, 'src/components')
      }
    }
  }
}

System:

• OS: MacOS 10.13.6 (High Sierra)
• Device: iMac (Retina 4K, 21.5-inch, 2017)
• Browser: not relevant
• Frameworks:
  @storybook/vue v5.0.11
  vue v2.6.10

Thanks.

[ieromanov]

Hi!

This is my config and it works for me.
I think this is not the best option, but others did not work for me.

.storybook\webpack.config.js

const path = require('path')
const rootPath = path.resolve(__dirname, '../src')

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    data: `
                        @import "@/scss/common/_functions.scss";
                        @import "@/scss/variables/_global.scss";
                        @import "@/scss/variables/_media.scss";
                        @import "@/scss/common/_mixins.scss";
                        @import "@/scss/common/_media.scss";
                    `
                }
            }
        ],
    })

    config.module.rules.push({
        test: /\.pug$/,
        loader: 'pug-plain-loader'
    })

    config.module.rules.push({
        test: /\.svg$/,
        use: [
            'svg-sprite-loader',
            'svgo-loader'
        ]
    })

    config.resolve.alias['@'] = rootPath
    config.resolve.alias['~'] = rootPath

    return config
}

[github-actions[bot]]

Automention: Hey @backbone87 @elevatebart @pksunkara, you've been tagged! Can you give a hand here?

[cojok]

Hi @goldstork,

Thanks a lot for the suggestion. It works!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[donghoon-song]

Hi!

This is my config and it works for me.
I think this is not the best option, but others did not work for me.

.storybook\webpack.config.js

const path = require('path')
const rootPath = path.resolve(__dirname, '../src')

module.exports = ({ config }) => {
  config.module.rules.push({
      test: /\.scss$/,
      use: [
          'vue-style-loader',
          'css-loader',
          {
              loader: 'sass-loader',
              options: {
                  data: `
                      @import "@/scss/common/_functions.scss";
                      @import "@/scss/variables/_global.scss";
                      @import "@/scss/variables/_media.scss";
                      @import "@/scss/common/_mixins.scss";
                      @import "@/scss/common/_media.scss";
                  `
              }
          }
      ],
  })

  config.module.rules.push({
      test: /\.pug$/,
      loader: 'pug-plain-loader'
  })

  config.module.rules.push({
      test: /\.svg$/,
      use: [
          'svg-sprite-loader',
          'svgo-loader'
      ]
  })

  config.resolve.alias['@'] = rootPath
  config.resolve.alias['~'] = rootPath

  return config
}

This worked for me. Importing css in configure.js doesn't have effect in my case. Thanks a lot. I spent few hours to solve this issue. As a version increases, code above doesn't work now. So I modified a little bit.

data -> additionalData

{

          loader: 'sass-loader',
          options: {
              additionalData: `
                  @import "@/scss/common/_functions.scss";
                  @import "@/scss/variables/_global.scss";
                  @import "@/scss/variables/_media.scss";
                  @import "@/scss/common/_mixins.scss";
                  @import "@/scss/common/_media.scss";
              `
          }
      }