import scss file with Storybook

It worked just by adding a webpack.config.js quite similar to my existing one :

const path = require('path')module.exports = {    module: {     rules: [     {        test: /\.scss$/,        loaders: ['style-loader', 'css-loader', 'sass-loader'],        include: path.resolve(__dirname, '../')     },     {  test: /\.css$/,        loader: 'style-loader!css-loader',        include: __dirname     },     {        test: /\.(woff|woff2)$/,        use: {          loader: 'url-loader',          options: {            name: 'fonts/[hash].[ext]',            limit: 5000,            mimetype: 'application/font-woff'          }         }     },     {       test: /\.(ttf|eot|svg|png)$/,       use: {          loader: 'file-loader',          options: {            name: 'fonts/[hash].[ext]'          }       }     }   ] }}

For those running storybook on Create React App, adding MiniCssExtractPlugin to .storybook/webpack.config.jon solved my problem loading sass files:

const path = require('path');const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = function({ config }) {  config.module.rules.push({    test: /\.scss$/,    loaders: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],    include: path.resolve(__dirname, '../')  });  config.plugins.push(new MiniCssExtractPlugin({ filename: '[name].css' }))  return config;};

Credits to Nigel Sim!

There is simple code for min.js in Storybook 6, and it's work fine for me!

const path = require('path');// Export a function. Accept the base config as the only param.module.exports = {  stories: [.....],  addons:[.....],  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?url=false', 'sass-loader'],      include: path.resolve(__dirname, '../'),    });    // Return the altered config    return config;  },};