Storybook React SassError：预期的“{”

Question

Trying to setup a Storybook using .scss file.

Following the doc >

// .storybook/main.js

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

Give me this error: SassError: expected "{".

All solution found seems outdated and it looks like there might be an issue with react-script "style-loaded" package somehow?

I guess styled-component is the way to go now.

Answer 1

I had the same problem. In my case the error was thrown because misalignment between the version of Webpack used by my project and the version of Webpack used by Stylebook to build the problem.

I fixed it installing Storybook that used Webpack5: https://storybook.js.org/blog/storybook-for-webpack-5/

Another possible fix to use css-modules, in case you need it, is to rename files in *.module.scss and there is a built-in rule in Stylebook that compile it as module.