profile
viewpoint

Ask questionsSassError on customized webpack config

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: #https://github.com/webpack-contrib/mini-css-extract-plugin/issues/126#issuecomment-542565698

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

storybookjs/storybook

Answer questions nirus

@CregskiN Good.

Finally solved

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

Hope this helps someone struggling out there.

useful!
source:https://uonfu.com/
Github User Rank List