Styles are not loading in prod with sass loader and storybook 4
See original GitHub issueDescribe 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:
- Created 5 years ago
- Reactions:6
- Comments:5 (3 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found

@hetzbr Do you have
sideEffects:falsein 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:More info
@igor-dv or @hetzbr Can you close this issue please?