Problem with less-loader and css modules

[tfomina]

Hi everyone!
I want to create a ui-kit using less, css modules and storybook but I got a problem with less-loader.
It's webpack.config.js

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

module.exports = (env, argv) => {
	const devMode = argv.mode === "development";

	const plugins = [];
	if (devMode) {
		plugins.push(new webpack.WatchIgnorePlugin({ paths: [/less\.d\.ts$/] }));
	} else {
		plugins.push(new CleanWebpackPlugin(["dist"], { root: __dirname }));
	}

	return {
		entry: "./src/index.ts",
		output: {
			filename: "index.js",
			path: path.resolve(__dirname, "dist"),
			libraryTarget: "umd",
			clean: true,
		},
		resolve: {
			extensions: [".js", ".jsx", ".ts", ".tsx"],
		},
		externals: {
			react: "react",
		},
		module: {
			rules: [
				{
					test: /\.(ts|tsx)?$/,
					use: ["ts-loader"],
					exclude: /node_modules/,
				},
				{
					test: /\.less$/,
					include: path.resolve(__dirname, "src"),
					use: [
						{ loader: devMode ? "style-loader" : MiniCssExtractPlugin.loader },

						{
							loader: "dts-css-modules-loader",
							options: {
								namedExport: true,
							},
						},
						{
							loader: "css-loader",
							options: {
								modules: {
									mode: "local",
									exportGlobals: true,
									localIdentName: "[path][name]__[local]--[hash:base64:5]",
									localIdentContext: path.resolve(__dirname, "src"),
									localIdentHashSalt: "my-custom-hash",
									namedExport: true,
									exportLocalsConvention: "camelCaseOnly",
									exportOnlyLocals: false,
								},
							},
						},
						{ loader: "postcss-loader", options: { postcssOptions: { plugins: ["postcss-preset-env"] } } },
						{
							loader: "less-loader",
							options: {
								lessOptions: {
									javascriptEnabled: true,
									relativeUrls: true,
								},
							},
						},
					],
				},
				{
					test: /\.(gif|png|jpe?g)$/,
					use: "url-loader",
				},
			],
		},
		plugins: [new MiniCssExtractPlugin(), ...plugins],
	};
};

Webpack configuration above generates *.less.d.ts files, they look like
Button.less.d.ts

export const button: string;
export const fullWidth: string;

and then I add import to the component
Button.tsx

import React from "react";
import clsx from "clsx";
import styles from "./Button.less";

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
	fullWidth?: boolean;
}

const Button: React.FC<ButtonProps> = ({ children, className, fullWidth, ...props }) => {
	const buttonClassName = clsx(styles.button, className, fullWidth && "fullWidth");

	return (
		<button {...props} className={buttonClassName}>
			{children}
		</button>
	);
};

Button.defaultProps = {
	fullWidth: false,
};

export default Button;

I added storybook
.storybook\main.js

module.exports = {
	stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
	addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
	core: {
		builder: "webpack5",
	},
};

but when I try to run npm run storybook I got an error

ModuleParseError: Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .button {
|       background-color: red;

I tried to change .storybook\main.js like

const custom = require("../webpack.config.js");

module.exports = {
	stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
	addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
	core: {
		builder: "webpack5",
	},
	webpackFinal: (config) => {
		return { ...config, module: { ...config.module, rules: custom.module.rules } };
	},
};

but this time I got error

TypeError: Cannot read property 'rules' of undefined
ERR!     at Object.webpackFinal

Could anyone help me, please?

[khats]

i think we have discussed this issue in discord,
../webpack.config.js return function module.exports = (env, argv) ... but call it not as function custom.module.rules. Correct call should be custom(myEnvVariable, myArgvValues).module.rules