[Vuejs]-Using SASS (indented syntax) in storybook

by

0đź‘Ť

âś…

Got it solved!

The problem was a conflict accured throught suing “indentedSyntax: true,” which should only be used fpr older sass-loader versions (<8). Since I am using 8.x “indentedSyntax: true,” should be placed within the sassOptions object…

Anyways, since I did not found any information related to that topic I will post the solution in here: Just add the webpack configuration to your .storybook/main.js, so you can use SASS within your storybook.

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.sass$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              indentedSyntax: true
            }
          }
        }
      ],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
};

Leave a comment