SassError on customized webpack config

[nirus]

Describe the bug
SassError - customized webpack config

To Reproduce

Github sample project for the issue -> here

** Clone the above project or follow below steps to reproduce the issue

Read the error logs below for the output

1st Method

Steps to reproduce the behavior:

1. Created simple project just with MUI button
2. Followed the steps https://storybook.js.org/docs/configurations/custom-webpack-config/
3. Error in running the project!

Code snippets - main.js

module.exports = {
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
  },
};

Error Log for above config:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "v": expected 1 selector or at-rule, was 'var api = require("'

2nd Solution partially works now:

Steps to reproduce the behavior:

1. Replaced style-loader with MiniCssExtractPlugin.

Code snippets - main.js

webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../src'),
    });

    config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }));

    // Return the altered config
    return config;
  },

Outcome:

npm run storybook - Works perfect now solved!
npm run build-storybook - now ERROR! building the storybook static

Error Log for above config:

ERR! => Failed to build the preview
ERR! ./src/library/Button/Button.scss
ERR! Module build failed (from ./node_modules/react-scripts/node_modules/mini-css-extract-> plugin/dist/loader.js):
ERR! ModuleBuildError: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ERR! Error: Didn't get a result from child compiler

Expected behavior
Should work as expected

Additional context
Project made with CRA - React App

Suspicion

I also suspect there are two configuration for handling .scss file after pushing the rule through custon config code. This creates the chaos!

Below defects helps to understand:
#webpack-contrib/mini-css-extract-plugin#126 (comment)

System:
Please paste the results of npx -p @storybook/cli@next sb info here.
System:
OS: macOS 10.15.5
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.13.0 - /usr/local/bin/node
npm: 6.14.2 - /usr/local/bin/npm
Browsers:
Chrome: 83.0.4103.97
Firefox: 76.0.1
Safari: 13.1.1
npmPackages:
@storybook/addon-actions: ^5.3.19 => 5.3.19
@storybook/addon-links: ^5.3.19 => 5.3.19
@storybook/addons: ^5.3.19 => 5.3.19
@storybook/react: ^5.3.19 => 5.3.19

[CregskiN]

I have a same problem as you. It's solved now.thanks

[nirus]

@CregskiN Good.

Finally solved

I wrote a blog solving the issue. You can checkout here.

Hope this helps someone struggling out there.

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[bswank]

@nirus Getting a WP error on your site. Could you post your solution here? I'm having this issue as well.

[nirus]

@bswank .. Apologies. Site is restored. You can check it it now!

[alexb148]

@nirus I may be misunderstanding your solution, but it's not doing what I think it's supposed to for me.

I have set the sass-resources-loader resources to include my scss file with my mixins and global variables:

{
  loader: require.resolve('sass-resources-loader'),
  options: {
    resources: [require.resolve('../src/css/global.scss')],
  },
},

But these mixins and variables still aren't accessible in the scss modules used in my components. Been trying a lot of different variations, but unfortunately no luck.

[tirrth]

Did anyone find a workaround for this?

[MONTYYYYY]

Did anyone find a workaround for this? :/