How to use global SCSS with storybook/html?

[dgknca]

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:

[qkreltms]

Why don't you try import scss in preview.js? see

[dgknca]

Why don't you try import scss in preview.js? see

isn't this? import '!style-loader!css-loader!sass-loader!../main.scss';

[qkreltms]

import "yourScssFileName.scss" in .storybook/preview.js

[qkreltms]

It seems you don't have css-loader type npm install -D css-loader sass sass-loader style-loader

[dgknca]

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.

[gpolanco]

@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

[vmcruz]

Had the same issue, downgrading as suggested by @gpolanco worked for me. Thanks.

[0xsven]

@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_" :/

[mpltr]

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

[rodrigo-arias]

@mpltr you saved my life, thanks