Storybook Global Scss variables

It seems to be an issue with Storybook handling multiple rules.

I solved it by a work around.

You can read the blog i wrote for detailed explaination here.

Below is my webpack config - main.js :

webpackFinal: async (config, { configType }) => {    config.module.rules.map((rule) => {      if (rule.oneOf) {        rule.oneOf = rule.oneOf.slice().map((subRule) => {          if (subRule.test instanceof RegExp && subRule.test.test('.scss')) {            return {              ...subRule,              use: [                ...subRule.use,                {                  loader: require.resolve('sass-resources-loader'),                  options: {                    resources: [                      path.resolve(__dirname, '../src/styles/_common.scss')                    ]                  }                }              ],            }          }          return subRule;        });      }      return rule;    });    return config;  },

Hope this helps someone!

I encountered the issue where global SASS variables were causing Storybook for Vue to fail.

For me, creating a webpack.config.js file in the .storybook folder with the below configuration solved my problem:

module.exports = (storybookBaseConfig, configType, defaultConfig) => {  defaultConfig.module.rules.push(    {      resourceQuery: /module/,      use: [        {          loader: 'vue-style-loader',          options: {            sourceMap: false,            shadowMode: false          }        },        {          loader: 'css-loader',          options: {            sourceMap: false,            importLoaders: 2,            modules: true,            localIdentName: '[name]_[local]_[hash:base64:5]'          }        },        {          loader: 'postcss-loader',          options: {            sourceMap: false          }        },        {          loader: 'sass-loader',          options: {            sourceMap: false,            indentedSyntax: true,            data: '@import "@/sass/_variables.scss";'          }        }      ]    }  );  return defaultConfig;};

Note the line data: '@import "@/sass/_variables.scss";' needs to match the file path for the SASS file with variables in your project.

This section of config was retrieved from Vue CLI 3 by running vue inspect > output.js and then copying the config for the rule test: /\.sass$/.

You need to add the scss rule in your .storybook/webpack.config.js for storybook to parse scss.

const path = require('path');const scss = {  test: /\.scss$/,  use: [    'vue-style-loader',    'css-loader',    'sass-loader'  ],};module.exports = (storybookBaseConfig, configType, defaultConfig) => {  defaultConfig.module.rules.push(scss);  return defaultConfig;};

You may also need to install the appropriate loaders:

yarn add -D vue-style-loader sass-loader css-loader