install stylus package

$ npm i -D stylus stylus-loader@4.3.3

我在使用时 webpack-chain 只支持webpack 2-4 所以不能下载webpack 5的 laoder

.umirc.ts

import * as path from 'path';
import { defineConfig } from 'umi';

export default defineConfig({

   async chainWebpack(memo, { env, webpack, createCSSRule }) {
     createCSSRule({
       lang: 'stylus',
       type: 'csr',
       test: /\.styl$/,
       loader: 'stylus-loader',
       options: {
         stylusOptions: { import: [path.join(__dirname, 'stylus.styl')] },
       },
     });
   },

  nodeModulesTransform: {
    type: 'none',
  },
  routes: [{ path: '/', component: '@/pages/index' }],
  fastRefresh: {},
});

typings.d.ts

declare module '*.styl';
declare module '*.css';
declare module '*.less';
declare module '*.png';
declare module '*.svg' {
  export function ReactComponent(
    props: React.SVGProps<SVGSVGElement>,
  ): React.ReactElement;
  const url: string;
  export default url;
}

stylus.styl

$primary = red

index.styl

.title
  background: $primary;