Storybook › Fail's to compile SASS if SFC's are nested beyond one level in src

[asherstoppard]

Overview

Storybook has an implementation of vue.config.js that looks up a relative path for common.scss (Used to pull in the appropriate fozzie SASS component):

config.module
  .rule('scss-importer')
  .test(/\.scss$/)
  .use('importer')
  .loader('sass-loader')
  .options({
    importer: magicImporter(),
    data: '@import "../assets/scss/common.scss";' // 👈
  });

As this path is relative, any components nested beyond one level in src fails to compile as common.scss cannot be found.

For example:

• f-content-cards/src/components/Component.vue: Compiles
• f-content-cards/src/components/templates/Component.vue: Fails

This issue is compounded by the fact that the Node process does not change directory whilst compiling so __dirname and process.cwd() always reflect the storybook component folder.

Fix Attempts

So far I've attempted the following fixes:

• path.resolve __dirname and the relative path. Failed as __dirname resolves to the storybook directory
• path.resolve process.cwd() and the relative path. Failed as process.cwd() resolves to the storybook directory
• Add @ to the relative path and add a webpack alias to map to src. Fails as src is looked up in the current directory (e.g. components).
• Add fozzie to storybook. Fails as we store SASS variables for each package in common.scss.

[asherstoppard]

Attempted using fs-glob with absolute URL's which seemingly failed on internal imports that couldn't find node_modules.

[asherstoppard]

Resolved in storybook@0.4.0 (#232 )