umi3.1怎么在tsx文件中使用styleName?

[SilentSword69]

参考了这个回答#1417里的方法，元素的 className 虽然加上了 hash,但是样式实际上没有引入

[SilentSword69]

config.ts

// https://umijs.org/config/
import { defineConfig } from 'umi'
import defaultSettings from './defaultSettings'
import proxy from './proxy'
import getLessLoader from './getLessLoader'

const { REACT_APP_ENV } = process.env

const config = defineConfig({
  hash: true,
  antd: {},
  alias: {
    api: '@/services/api',
    i18n: '@/services/i18n',
    tea: '@/services/tea',
  },
  dva: {
    hmr: true,
  },
  dynamicImport: {
    loading: '@/components/PageLoading/index',
  },
  targets: {
    ie: 11,
  },
  routes: [
    // {
    //   path: '/user',
    //   routes: [
    //     {
    //       name: 'login',
    //       path: '/user/login',
    //       component: './user/login',
    //     },
    //   ],
    // },
    {
      path: '/entry',
      name: 'entry',
      icon: 'smile',
      component: './entry',
      layout: false,
    },
    {
      path: '/createSubscription',
      name: 'createSubscription',
      icon: 'smile',
      component: './create-subscription',
      layout: false,
    },
    {
      path: '/createSubmited',
      name: 'createSubmited',
      icon: 'smile',
      component: './create-submited',
      layout: false,
    },
    {
      path: '/subscriptionDetail',
      name: 'subscriptionDetail',
      icon: 'smile',
      component: './subscription-detail',
      layout: false,
    },
    {
      path: '/auth-setting',
      name: 'authSetting',
      icon: 'smile',
      component: './auth-setting',
      layout: false,
    },
    {
      path: '/',
      component: '@/layout/tmp/BasicLayout.tsx',
      routes: [
        {
          path: '/welcome',
          name: 'welcome',
          icon: 'smile',
          component: './Welcome',
        },
        {
          path: '/kitchen',
          name: 'kitchen',
          icon: 'smile',
          component: './kitchen',
          layout: false,
        },
        {
          path: '/create-account',
          name: 'createAccount',
          icon: 'smile',
          component: '@/pages/create-subscription',
          layout: false,
        },
        {
          path: '/admin',
          name: 'admin',
          icon: 'crown',
          routes: [
            {
              path: '/admin/sub-page',
              name: 'sub-page',
              icon: 'smile',
              component: '@/pages/ListTableList',
              layout: false,
            },
            {
              path: '/admin/third-page',
              name: 'third-page',
              icon: 'smile',
              component: './Welcome',
              access: 'canAdmin',
              layout: false,
            },
          ],
        },
      ],
    },
  ],
  theme: {
    // ...darkTheme,
    'primary-color': defaultSettings.primaryColor,
  },
  ignoreMomentLocale: true,
  proxy: proxy[REACT_APP_ENV || 'dev'],
  manifest: {
    basePath: '/',
  },
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        exclude: 'node_modules',
        generateScopedName: '[name]__[local]___[hash:base64:5]',
        filetypes: {
          '.less': {
            syntax: 'postcss-less',
          },
        },
      },
    ],
  ],
  lessLoader: getLessLoader,
})

export default config

[xiaohuoni]

如何使用的？

[EmiyaYang]

@xiaohuoni

遇到同样的问题，hash生成了，但样式没有被引入。

相关依赖

• "postcss-less": "^3.1.4"
• "umi": "^3.2.3"
• "babel-plugin-react-css-modules": "^5.2.6"

配置

// .umirc.ts
{
  // ...
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        exclude: 'node_modules',
        generateScopedName: '[name]__[local]___[hash:base64:5]',
        filetypes: {
          '.less': {
            syntax: 'postcss-less',
          },
        },
      },
    ],
  ],
}

使用

// src/layout/index.less
.container {
  padding: 10px !important;
}

// src/layout/index.less
import * as React from 'react';
import { IRouteComponentProps } from 'umi';
import './index.less';

export default function Layout({ children }: IRouteComponentProps) {
  return <section styleName="container">{children}</section>;
}

检查

[williamyorkl]

@xiaohuoni

遇到同样的问题，hash生成了，但样式没有被引入。

相关依赖

• "postcss-less": "^3.1.4"
• "umi": "^3.2.3"
• "babel-plugin-react-css-modules": "^5.2.6"

配置

// .umirc.ts
{
  // ...
  extraBabelPlugins: [
    [
      'react-css-modules',
      {
        exclude: 'node_modules',
        generateScopedName: '[name]__[local]___[hash:base64:5]',
        filetypes: {
          '.less': {
            syntax: 'postcss-less',
          },
        },
      },
    ],
  ],
}

使用

// src/layout/index.less
.container {
  padding: 10px !important;
}

// src/layout/index.less
import * as React from 'react';
import { IRouteComponentProps } from 'umi';
import './index.less';

export default function Layout({ children }: IRouteComponentProps) {
  return <section styleName="container">{children}</section>;
}

检查

大佬, 你后面解决问题了么, 我的情况一毛一样....

[chenxiaoyao6228]

可行的方案

umi版本

"umi": "^3.5.20",

step1

安装包

yarn add babel-plugin-react-css-modules @types/react-css-modules -D

step2

config.ts中

const GENERATE_PATH = '[path]___[name]__[local]___[hash:base64:5]';

const cssLoaderOptions = {
  modules: {
    localIdentName: GENERATE_PATH,
    auto: (resourcePath: string) => !resourcePath.match(/node_modules/g), // 保证antd样式文件不哈希
  },
};

export default defineConfig({
  extraBabelPlugins: [
    [
      'babel-plugin-react-css-modules',
      {
        exclude: 'node_modules',
        generateScopedName: GENERATE_PATH,
        filetypes: {
          '.less': {
            syntax: 'postcss-less',
          },
        },
      },
    ],
  ],
  cssLoader: cssLoaderOptions
}