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...
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);
};
Chloe Bennett explores the intersection of pop culture, streaming entertainment, digital trends, and contemporary lifestyle. Her weekly commentary reaches thousands of culture enthusiasts.
