Storybook vuejs scss global scss helper file not available via webpack

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. 2. run $ npm run storybook 3. 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
}

[js-wi5]

Thanks @davestewart that’s much simpler than the other solutions and worked for me too.

It should be noted that if your version of sass-loader is v10.* (as on my project) then the above will work when data: is replaced with additionalData:.