storybookjs
How to use global SCSS with storybook/html?
I've initialized a storybook project using npx -p @storybook/cli sb init --type html and then I wanted to use SCSS for all stories. I installed @storybook/preset-scss but there is no documentation about 'how can we use it?' I'm going to paste my config files.
// .storybook/main.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// Export a function. Accept the base config as the only param.
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/preset-scss",
"@storybook/addon-essentials"
],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
// this is for both less and scss
test: /.*\.(?:sa|c|sc)ss$/,
loaders: [
'style-loader',
'css-loader',
'sass-loader',
]
});
config.plugins.push(new MiniCssExtractPlugin({
filename: '[name]-[contenthash].css',
chunkFilename: '[id]-[contenthash].css',
}));
return config;
},
};
// .storybook/preview.js
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
}
import '!style-loader!css-loader!sass-loader!../main.scss';
but it didn't work anyway. How can I import the .scss file? Error:
Why don't you try import scss in preview.js? see
isn't this? import '!style-loader!css-loader!sass-loader!../main.scss';
It seems you don't have css-loader type npm install -D css-loader sass sass-loader style-loader
It seems you don't have css-loader type
npm install -D css-loader sass sass-loader style-loader
Thanks @qkreltms ! I'll try it tomorrow.
@dgknca I had the same problem. With sass-loader version 11.0.1 I have downgraded to version 10.1.1, and it worked for me
Had the same issue, downgrading as suggested by @gpolanco worked for me. Thanks.
@dgknca I had the same problem. With sass-loader version 11.0.1 I have downgraded to version 10.1.1, and it worked for me
It worked for me. But now all global classes are prefixed with "global_" :/
No import in preview.js worked for me, though I am using a fairly customised version of storybook with scss modules. My solution for @storybook/react ^6.2.9 with @storybook/preset-scss ^1.0.3 was to tap into the sassLoaderOptions and use the additionalData option detailed in webpack docs.
.storybook/main.js
module.exports = {
stories: ["../src/**/*.stories.tsx"],
addons: [
{
name: '@storybook/preset-scss',
options: {
cssLoaderOptions: {
modules: true,
},
sassLoaderOptions: {
additionalData: (content) => {
// paths are relative to root dir in this case
return `
@import "scss/vars.scss";
@import "scss/mixins.scss";
` + content; // content is the individual module.scss file
}
}
}
},
'@storybook/addon-essentials',
],
...
}
This prepends the import statements to each *.module.scss file before processing.
scss/vars.scss
$temp: red;
src/TempComponent/TempComponent.module.scss
.block {
background-color: $temp;
}
