Be nice to have Sass support

[earthtosid]

If it could only resolve scss/sass modules as well, this preset would be worth in gold.

[Negan1911]

Does https://www.npmjs.com/package/@storybook/preset-scss resolves your need? I'm not quite sure about adding sass support here.

[kintz09]

I've been actively trying to get my storybook configured for standard css/sass modules using the .module.scss and I can confirm that the @storybook/preset-scss preset does not cover this scenario. It does get sass working, and it allows you to pass an options object into it so that you can enable css modules.

Where it fails is the file naming convention. With @storybook/preset-scss, the CSS modules options get enabled for any sass file. I still want to retain non-module css/scss files in my project.

I would also love if this preset could offer support for Sass Modules. Or if a new preset was created nearly identical to this one, except for scss files. Then we could simply use these two presets to get CSS/SCSS modules fully functioning.

FWIW, I did try to create a preset like this, but I keep running into compiler errors that I don't know how to troubleshoot.

[earthtosid]

@kintz09 - here's my main.js file that was successfully able to configure sass modules with storybook.

const path = require("path");

module.exports = {
  webpackFinal: async (config) => {
    config.resolve.modules.push(path.resolve(__dirname, '../src'));

    return config;
  },
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    {
      name: "@storybook/preset-scss",
      options: {
        cssLoaderOptions: {
          modules: {
            auto: true,
          },
        },
      },
    },
  ],
};

EDIT: Ah I see what you're saying. I can still get my non-module sass files working just fine. Can you specify your use case in an example?

[kintz09]

@earthtosid You know, I haven't seen that auto option yet. Let me see how that setting affects my project.

[kintz09]

@earthtosid Thank you for sharing your config, I'm actually having great luck with the @storybook/preset-scss preset now! I did have to add an additional option to get the class names exported properly, but this seems more than sufficient for my needs.

{
      name: "@storybook/preset-scss",
      options: {
        cssLoaderOptions: {
          modules: {
            auto: true,
            exportLocalsConvention: "camelCase",
          },
        },
      },
    },

Does this storybook-css-modules-preset preset accept any options? I think the only thing I'm missing from my project is the exportLocalsConvention in the loader for the module.css test case.

[tosidsethi]

@kintz09 - not sure if this package is required for your use case as you can pretty much do everything with @storybook/preset-scss, as did I.

[kintz09]

@kintz09 - not sure if this package is required for your use case as you can pretty much do everything with @storybook/preset-scss, as did I.

Passing the modules options to the @storybook/preset-scss preset is working perfectly for scss files, but does it do anything for css files?

I will remove the storybook-css-modules-preset from my add-ons and test again.

[kintz09]

@tosidsethi I removed storybook-css-modules-preset from my addons leaving only the @storybook/preset-scss addon. I confirmed that CSS Modules is no longer enabled/working for files ending in .module.css.

I also took another peek at the source code for @storybook/preset-scss and confirmed the preset is only affecting scss/sass files.

I went ahead and opened a new issue in this repo requesting the module options as a feature add.

But if anyone knows of other solutions to try, please let me know and I will test it. Thank you!