Storybook UI with CSS modules and Less - reactjs

Question

Is it possible to use Storybook UI with React, CSS modules and Less? Have anyone managed to configure this kind of setup?

Answer 1

Adding .storybook/webpack.config.js helped me fix the issue, with
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader'],
}, {
test: /\.css$/,
use: {
loader: "css-loader",
options: {
modules: true,
}
}
}
],
},
}

Answer 2

I had same case. Resolved by adding webpackFinal to .storybook/main.js :
module.exports = {
stories: ['../src/**/*.stories.[tj]s'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push(
{
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
},
},
require.resolve('less-loader')
]
},
);
return config;
},
};

Answer 3

With sass as example:
Step 1: configure webpack in main.js. You can find documentation here: https://storybook.js.org/docs/configurations/custom-webpack-config/
const path = require('path');
module.exports = {
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, '../'),
});
// Return the altered config
return config;
},
stories: ['../stories/**/*.stories.js'],
};
Step 2: Install sass-loader
https://webpack.js.org/loaders/sass-loader/
Step 3: Create your scss files
#import "../stories/main.scss";
h1{color:$mediumBlue}

Answer 4

Modify your .storybook.main.js
module.exports = {
stories: ['../src/**/*.stories.js'],
addons: [
'#storybook/preset-create-react-app',
'#storybook/addon-actions',
'#storybook/addon-links',
],
webpackFinal: async (webpackConfig, { 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.
const { loadCracoConfig } = require('#craco/craco/lib/config');
const { getCraPaths } = require('#craco/craco/lib/cra');
const context = {env: process.env.NODE_ENV};
const cracoConfig = loadCracoConfig(context);
context.paths = getCraPaths(cracoConfig);
const {overrideWebpackConfig} = require('#semantic-ui-react/craco-less');
overrideWebpackConfig({
context,
webpackConfig
});
// Return the altered config
return webpackConfig;
},
};
This is taken from node_modules/#craco/craco/scripts/start.js

Answer 5

localIdentName option moved in css-loader configuration so this is the new configuration.
source: https://github.com/rails/webpacker/issues/2197#issuecomment-517234086
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.#(js|jsx|ts|tsx)'],
webpackFinal: async (config) => {
config.module.rules.push({
test: /\.less$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules: {
localIdentName: '[name]__[local]___[hash:base64:5]',
},
},
},
require.resolve('less-loader'),
],
});
return config;
},
};