question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Styles are not loading in prod with sass loader and storybook 4

See original GitHub issue

Describe the bug Storybook is loading with stories and the styles are getting loaded when running in dev mode. When running from storybook-static, the styles are not loading

To Reproduce webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, '..', 'src', 'assets'),
      },
    ]),
  ],
  module: {
    rules: [
      {
        exclude: /node_modules/,
        loader: 'babel-loader',
        test: /\.jsx?$/,
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
      {
        test: /\.(ttf|eot|svg|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader',
      },
    ],
  },
};

config.js

import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
import { themes } from '@storybook/components';

setOptions({
  theme: themes.dark
});

const req = require.context('../stories', true, /.stories.jsx?$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

Dependencies:

    "@babel/cli": "^7.1.2",
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.1.2",
    "@storybook/addon-actions": "^4.0.0",
    "@storybook/addon-info": "^4.0.0",
    "@storybook/addon-links": "^4.0.0",
    "@storybook/addon-options": "^4.0.0",
    "@storybook/addon-viewport": "^4.0.0",
    "@storybook/addons": "^4.0.0",
    "@storybook/components": "^4.0.0",
    "@storybook/react": "^4.0.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.23.1"

Additional context In dev mode I can see that the styles are getting added using emotion/core, but none of the styles show up when serving from static.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:6
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

20reactions
ozgkrccommented, Nov 5, 2018

@hetzbr Do you have sideEffects:false in your package.json? In my case, Webpack 4 considers scss files as a “side effect” and dropping them in production build. So I needed to add:

{
        test: /\.scss$/,
        sideEffects: true,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
},

More info

1reaction
chadfawcettcommented, Nov 6, 2018

@igor-dv or @hetzbr Can you close this issue please?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Import scss file is not working inside storybook file
Commenting out config rules in main.js file: config.module.rules.push({. test: /\.scss$/,. use: ["style-loader", "css-loader", "sass-loader"],.
Read more >
Loading Styles - SurviveJS
Webpack doesn't handle styling out of the box, and you will have to use loaders and plugins to allow loading style files. In...
Read more >
Webpack - Storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and...
Read more >
sass-loader - npm
scss " is the same as @import "./style.scss";. Problems with url(...) Since Sass implementations don't provide url rewriting, all ...
Read more >
Configuring Storybook: 6 Tips You Can't Miss | by Zheng Li
This article will be focused on the problems I've encountered and how I ... global css/sass, so it will apply the styles to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found