Storybook not loading LESS files?

[Jeannette0217]

This is Button component to introduce less files

import React, { FC, HTMLAttributes, ReactChild } from 'react';
import'./styles.less';

export interface Props extends HTMLAttributes<HTMLButtonElement> {
    children?: ReactChild;
}

const Button: FC<Props> = () => {
    return <button className={'alpha-button'}>alpha-h1</button>
};

export default Button;

This is less file：

.alpha-button {

}

This is the tsdx.config.js file for the root directory:

const postcss = require('rollup-plugin-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

module.exports = {
  rollup(config, options) {
    config.plugins.push(
      postcss({
        use: ['sass', 'stylus', 'less'],
        extract : true,
        less: true,
        extensions: ['.css', '.sss', '.pcss', '.less'],
        plugins: [
          autoprefixer(),
          cssnano({
            preset: 'default',
          }),
        ],
        inject: false,
        // only write out CSS for the first bundle (avoids pointless extra files):
        extract: !!options.writeMeta,
      })
    );
    return config;
  },
};

This is package.json file

{
  "version": "0.1.0",
  "license": "MIT",
  "main": "dist/index.js",
  "typings": "dist/index.d.ts",
  "files": [
    "dist",
    "src"
  ],
  "engines": {
    "node": ">=10"
  },
  "scripts": {
    "start": "concurrently \"npm run watch\" \"npm run storybook\"",
    "watch": "tsdx watch",
    "storybook": "start-storybook -p 6006",
    "build": "tsdx build",
    "test": "tsdx test --passWithNoTests",
    "lint": "tsdx lint",
    "prepare": "tsdx build",
    "size": "size-limit",
    "analyze": "size-limit --why",
    "build-storybook": "build-storybook"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "husky": {
    "hooks": {
      "pre-commit": "tsdx lint"
    }
  },
  "prettier": {
    "printWidth": 80,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5"
  },
  "name": "alpha-ui",
  "author": "DESKTOP-MD9JQ31\\pc",
  "module": "dist/alpha-ui.esm.js",
  "size-limit": [
    {
      "path": "dist/alpha-ui.cjs.production.min.js",
      "limit": "10 KB"
    },
    {
      "path": "dist/alpha-ui.esm.js",
      "limit": "10 KB"
    }
  ],
  "devDependencies": {
    "@babel/core": "^7.17.2",
    "@size-limit/preset-small-lib": "^7.0.8",
    "@storybook/addon-essentials": "^6.4.18",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.4.18",
    "@storybook/addons": "^6.4.18",
    "@storybook/react": "^6.4.18",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "babel-loader": "^8.2.3",
    "concurrently": "^7.0.0",
    "husky": "^7.0.4",
    "less-loader": "^10.2.0",
    "node-sass": "^7.0.1",
    "postcss-modules": "^4.3.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "size-limit": "^7.0.8",
    "tsdx": "^0.14.1",
    "tslib": "^2.3.1",
    "typescript": "^4.5.5"
  },
  "dependencies": {
    "autoprefixer": "^10.0.2",
    "classnames": "^2.3.1",
    "cssnano": "^5.0.17",
    "less": "^4.1.2",
    "lodash": "^4.17.21",
    "lodash-es": "^4.17.21",
    "postcss": "^8.1.7",
    "postcss-loader": "^4.0.4",
    "rollup-plugin-less": "^1.1.3",
    "rollup-plugin-postcss": "^4.0.0"
  }
}

I follow the rollup-plugin-postcss support configuration, but still have not been able to identify less syntax, tried many methods can, do not know what the problem. I am stuck with this error, please help me to check what is the reason, Thanks.

How to support less, please provide the following configuration methods

[agilgur5]

The error you've listed isn't with TSDX, but with Storybook. Your tsdx build seems to run fine and you seem to have configured that fine (although your package.json seems to have various devDeps and deps mixed up with each other -- but not a TSDX issue and not a support forum). This is TSDX's issues page, not Storybook's, and this is not a support forum. You also removed the issue template while posting here, but it is there for a reason.

I can give you a quick answer though, you need to configure Storybook to read your LESS files. Here is their documentation page for PostCSS integration