Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to run storybook after updating to 5.x, using css modules and sass. #9670

Closed
Tasemu opened this issue Jan 29, 2020 · 6 comments
Closed
Assignees
Labels

Comments

@Tasemu
Copy link

Tasemu commented Jan 29, 2020

Describe the bug
When running storybook after upgrading to the latest version, i get console errors stating that it cannot understand my .module.scss files

To Reproduce
Run npm run storybook in CRA app

Expected behavior
Runs storybook

Screenshots
image

image

Code snippets
webpack.config.js within .storybook

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: require.resolve('style-loader')
                    },
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            modules: true
                        }
                    }
                ]
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: require.resolve('style-loader')
                    },
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            modules: true
                        }
                    },
                    {
                        loader: require.resolve('sass-loader')
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg)$/,
                use: [
                    {
                        loader: require.resolve('url-loader'),
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
};

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
  Binaries:
    Node: 10.17.0 - ~/.nvm/versions/node/v10.17.0/bin/node
    npm: 6.13.6 - ~/.nvm/versions/node/v10.17.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-actions: ^5.3.9 => 5.3.9 
    @storybook/addon-links: ^5.3.9 => 5.3.9 
    @storybook/addons: ^5.3.9 => 5.3.9 
    @storybook/react: ^5.3.9 => 5.3.9 

Additional context
Add any other context about the problem here.

@shilman shilman added configuration babel / webpack cra Prioritize create-react-app compatibility question / support labels Jan 30, 2020
@shilman
Copy link
Member

shilman commented Jan 30, 2020

cc @mrmckeb

@mrmckeb
Copy link
Member

mrmckeb commented Feb 11, 2020

Hi @Tasemu, are you using the new external preset for CRA? If not, please give that a go - and remove your custom Webpack config as it will conflict :)

Sorry for the long delay, I was abroad.

@mrmckeb mrmckeb self-assigned this Feb 11, 2020
@mrmckeb
Copy link
Member

mrmckeb commented Mar 1, 2020

Hi @Tasemu, is this still an issue or can we close this off? Thanks!

@ionab
Copy link

ionab commented Mar 3, 2020

@mrmckeb following as I have the same issue but using CRA.

My sass/scss is working fine from within this repository, however storybook build fails when I try to use a package from my node_modules where there is scss involved.

Private repo for now or I'd share appologies.

@stale
Copy link

stale bot commented Mar 24, 2020

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 stale bot added the inactive label Mar 24, 2020
@stale
Copy link

stale bot commented Apr 25, 2020

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!

@stale stale bot closed this as completed Apr 25, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants