I'm currently facing issue on storybook react using scss. I'm using sb init to create the storybook file. Everything is working, all the addons loaded but only the style is not working. If I use css file, the style will be working.
I'm already following the instruction from documentation on using @storybook/preset-scss and the webpackFinal config, but it still not working
this is a sample from storybook file
import './button.scss'; is not working properly
import React from 'react';
import PropTypes from 'prop-types';
import './button.scss'; -> this one not working
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style={backgroundColor && { backgroundColor }}
{...props}
>
{label}
</button>
);
};
Button.propTypes = {
primary: PropTypes.bool,
backgroundColor: PropTypes.string,
size: PropTypes.oneOf(['small', 'medium', 'large']),
label: PropTypes.string.isRequired,
onClick: PropTypes.func,
};
Button.defaultProps = {
backgroundColor: null,
primary: false,
size: 'medium',
onClick: undefined,
};
this is my /storybook/main.js file
const path = require('path')
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-scss"
],
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, '../src'),
});
// Return the altered config
return config;
},
}
webpack.config.js
const path = require('path')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base')
const config = {
output: {
path: path.resolve(__dirname, 'lib'),
filename: 'index.js',
libraryTarget: 'commonjs2',
library: 'violets'
}
}
module.exports = merge(baseConfig, config)
webpack.base.js
const path = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const autoprefixer = require('autoprefixer')
module.exports = {
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
new OptimizeCSSAssetsPlugin({})
],
},
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/,
loader: require.resolve('babel-loader'),
options: {
compact: true
}
},
{
test: /\.css$/,
loaders: ['style-loader', 'css-loader'],
},
{
test: /\.scss$/,
sideEffects: true,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: 'css-loader',
options: { importLoaders: 1 }
},
{
loader: require.resolve('sass-loader')
},
{
loader: 'postcss-loader',
options: {
plugins: [
/* eslint global-require: ["off"] */
require('postcss-flexbugs-fixes'),
autoprefixer({
flexbox: 'no-2009'
})
]
}
}
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader'
},
]
},
externals: {
react: 'react',
'react-dom': 'react-dom'
},
plugins: [
new MiniCssExtractPlugin({
filename: 'violets.min.css'
})
]
}