SassError: SassError: expected "{". in Storybook

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.)

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.

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); };