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

CSS not being imported after update to 5.3.3 #9449

Closed
JonnyPS opened this issue Jan 14, 2020 · 3 comments
Closed

CSS not being imported after update to 5.3.3 #9449

JonnyPS opened this issue Jan 14, 2020 · 3 comments
Labels
bug cra Prioritize create-react-app compatibility
Milestone

Comments

@JonnyPS
Copy link

JonnyPS commented Jan 14, 2020

Describe the bug
CSS is not loading into Storybook

To Reproduce
Set up create-react-app, add storybook to it.
Add a file named test.css to the src/ dir.
Create a .storybook/preview.js file, add the following line:

import '../src/test.css';

Expected behavior
The styles from the css file to be applied to the storybook components

System:
System:
OS: macOS Sierra 10.12.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.11.1 - ~/.nvm/versions/node/v12.11.1/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.11.3 - ~/.nvm/versions/node/v12.11.1/bin/npm
Browsers:
Chrome: 79.0.3945.117
Firefox: 60.7.2
Safari: 12.1.1
npmPackages:
@storybook/addon-a11y: ^5.3.3 => 5.3.3
@storybook/addon-actions: ^5.3.3 => 5.3.3
@storybook/addon-docs: ^5.3.3 => 5.3.3
@storybook/addon-info: ^5.3.3 => 5.3.3
@storybook/addon-knobs: ^5.3.3 => 5.3.3
@storybook/addon-links: ^5.3.3 => 5.3.3
@storybook/addon-viewport: ^5.3.3 => 5.3.3
@storybook/addons: ^5.3.3 => 5.3.3
@storybook/preset-create-react-app: ^1.5.1 => 1.5.1
@storybook/preset-scss: ^1.0.2 => 1.0.2
@storybook/react: ^5.3.3 => 5.3.3

@shilman shilman added bug cra Prioritize create-react-app compatibility high priority labels Jan 15, 2020
@shilman shilman added this to the 5.3.x milestone Jan 15, 2020
@JonnyPS JonnyPS closed this as completed Jan 15, 2020
@shilman
Copy link
Member

shilman commented Jan 15, 2020

@JonnyPS did you figure it out? what was it?

@eriktoyra
Copy link

@JonnyPS: I tried to reproduce the problem with my Storybook running 5.3.3 but for me it's working fine. The CSS file is imported and the CSS is applied to the preview as expected.

Compare your setup with mine below.

System

OS: macOS Mojave 10.14.6
Binaries: Node 12.11.1

NPM

"devDependencies": {
    "@sambego/storybook-state": "1.3.6",
    "@storybook/addon-actions": "^5.3.3",
    "@storybook/addon-knobs": "5.3.3",
    "@storybook/addon-notes": "5.3.3",
    "@storybook/react": "5.3.3",
    "@storybook/storybook-deployer": "2.8.1",
    "@types/jest": "24.0.25",
    "@types/node": "13.1.6",
    "@types/react": "16.9.17",
    "@types/react-autosuggest": "9.3.13",
    "@types/react-dom": "16.9.4",
    "@types/react-modal": "3.10.2",
    "@types/react-sidebar": "3.0.0",
    "@types/uniqid": "4.1.3",
    "copyfiles": "2.1.1",
    "jest": "24.9.0",
    "react": "16.12.0",
    "react-dom": "16.12.0",
    "react-scripts": "3.3.0",
    "rimraf": "3.0.0",
    "ts-jest": "24.3.0",
    "tslint": "^5.20.0",
    "tslint-react": "^4.1.0",
    "typescript": "3.7.4"
  },
  "dependencies": {
    "@emotion/core": "10.0.27",
    "@emotion/styled": "10.0.27",
    "@reach/router": "1.2.1",
    "@storybook/addon-docs": "^5.3.3",
    "@storybook/preset-create-react-app": "^1.5.1",
    "@testing-library/react": "9.4.0",
    "@types/reach__router": "1.2.6",
    "date-fns": "2.9.0",
    "emotion-theming": "10.0.27",
    "polished": "3.4.2",
    "react-autosuggest": "^9.4.3",
    "react-css-collapse": "4.0.3",
    "react-formatted-number-input": "2.0.0",
    "react-modal": "3.11.1",
    "react-sidebar": "3.0.2",
    "uniqid": "^5.0.3"
  },

@JonnyPS
Copy link
Author

JonnyPS commented Jan 15, 2020

@JonnyPS did you figure it out? what was it?

Hello @shilman - sorry for the trouble, no bug, I just didn't have my styles setup correctly it would appear. However, I am having trouble with importing scss which i have opened a new ticket for - I have followed the docs but it doesn't seem to run the loaders.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug cra Prioritize create-react-app compatibility
Projects
None yet
Development

No branches or pull requests

3 participants