SassError: SassError: expected "{". in Storybook

user_1022330 0
Viewed 2845

I am trying to use Storybook to work on my components. My components use SASS for styling, but when I start storybook I get this error :

SassError: SassError: expected "{".
  ╷
2 │ var content = require("!!../../../node_modules/css-loader/dist/cjs.js?modules&importLoaders!../../../node_modules/sass-loader/dist/cjs.js!./fileUpload.scss");
  │                                                                                                                                                              ^
  ╵

My fileUpload.scss file looks pretty benign. It's pretty ordinary SCSS/CSS :

nav {
  .file-upload-modal {
    min-width: 900px;
  }

  .file-upload-content {
    min-width: 500px;
  }
}

What is this SassError error trying to tell me?

My storybook main.js looks like this :

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    // "@storybook/preset-scss",
  ],
  "framework": "@storybook/react",


  webpackFinal: async (config, { configType }) => {
    // add SCSS support for CSS Modules
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });
    return config;
  },
}

(I tried to install @storybook/preset-scss but got all sorts of peer dependency crashes with typescript and react.)

node-sass storybook sass
2 Answers

This is really strange, but all I did was remove the "webpackFinal" section in the main.js.

//main.js

module.exports = {
    stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/preset-create-react-app",
    ],
};

My thinking now, is that the preset-create-react-app probably was conflicting with what I was defining in the webpackfinal.

Hmmm... not satisfied really, but at least it works now for me.

user_10223300

I have a completely strange case. I randomly added a custom loader and it worked

My webpackFinal.js rule

{
    test: /\.module\.scss$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: { modules: true, sourceMap: true },
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: path.resolve('./.storybook/loaders/loader.js'),
        options: {},
      },
    ],
  }

Custome loader

module.exports = function (_source) {
  console.log(this.resourcePath);
};
user_100412610
Related