[Bug] 项目中用CSS Modules 识别不了*.less文件

[chenleyiduo]

What happens?

项目中用CSS Modules 识别不了*.less文件

• 项目目录结构：

• package.json

  {
  "name": "audit",
  "private": true,
  "scripts": {
  "start": "umi dev",
  "start:lt": "cross-env MOCK=none REACT_APP_ENV=lt umi dev",
  "build": "cross-env UMI_ENV=prod umi build",
  "build:fx": "cross-env UMI_ENV=prod ANALYZE=1 umi build",
  "postinstall": "umi generate tmp",
  "prettier": "prettier --write src/**/*.{js,jsx,tsx,ts,less,md,json}",
  "lint-fix": "eslint --fix src/**/*.{js,jsx,tsx,ts}",
  "lint": "eslint **/*.ts",
  "stylelint": "stylelint src/**/*.{less,css}",
  "commit": "git-cz",
  "test": "umi-test",
  "test:coverage": "umi-test --coverage"
  },
  "gitHooks": {
  "pre-commit": "lint-staged"
  },
  "lint-staged": {
  "*.{js,jsx,ts,tsx}": [
    "prettier --parser=typescript --write src/**/*.{js,jsx,tsx,ts}",
    "eslint --fix",
    "git add"
  ],
  "*.{less,css}": [
    "prettier --write src/**/*.{less,css}",
    "stylelint --fix src/**/*.{less,css}",
    "git add"
  ]
  },
  "dependencies": {
  "@ant-design/charts": "^1.0.11",
  "@ant-design/icons": "^4.3.0",
  "@ant-design/pro-layout": "^5.0.12",
  "antd": "^4.9.2",
  "commitizen": "^4.2.2",
  "dva": "^2.4.1",
  "echarts": "^5.0.0",
  "echarts-for-react": "^2.0.16",
  "history": "^5.0.0",
  "lodash": "^4.17.20",
  "moment": "^2.29.1",
  "react": "^16.12.0",
  "react-dom": "^16.12.0",
  "react-highlight-words": "^0.16.0",
  "umi": "^3.2.10",
  "umi-request": "^1.3.5",
  "yorkie": "^2.0.0"
  },
  "devDependencies": {
  "@types/react-highlight-words": "^0.16.1",
  "@typescript-eslint/eslint-plugin": "^4.10.0",
  "@typescript-eslint/parser": "^4.10.0",
  "@umijs/fabric": "^2.3.1",
  "@umijs/plugin-qiankun": "^2.21.2",
  "@umijs/preset-react": "1.x",
  "@umijs/test": "^3.2.10",
  "base-64": "^1.0.0",
  "cross-env": "^7.0.2",
  "eslint": "^7.15.0",
  "eslint-config-airbnb": "^18.2.1",
  "eslint-config-prettier": "^7.0.0",
  "eslint-plugin-eslint-comments": "^3.2.0",
  "eslint-plugin-import": "^2.22.1",
  "eslint-plugin-jsx-a11y": "^6.4.1",
  "eslint-plugin-prettier": "^3.3.0",
  "eslint-plugin-react": "^7.21.5",
  "eslint-plugin-react-hooks": "^4.2.0",
  "husky": "^4.3.6",
  "js-export-excel": "^1.1.4",
  "lint-staged": "^10.5.3",
  "prettier": "^2.2.1",
  "tslint": "^6.1.3",
  "typescript": "^3.9.7"
  },
  "husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
  }
  }

• tsconfig.eslint.json

  {
  "extends": "./tsconfig.json",
  "include": [
      "mock/**/*",
      "src/**/*",
      "config/**/*",
      ".eslintrc.js",
      ".prettierrc",
      ".stylelintrc.js",
      "tslint.json"
  ]
  }

• tsconfig.json

  {
  "compilerOptions": {
  "target": "es6",
  "module": "commonjs",
  "moduleResolution": "node",
  "importHelpers": true,
  "jsx": "react",
  "esModuleInterop": true,
  "sourceMap": true,
  "baseUrl": "./",
  "strict": true, // 严格模式
  "noImplicitAny": true,
  "strictNullChecks": false, // 由于react里很多官方类型具有undefine,因此暂时取消这个检测,保证向后兼容
  "suppressImplicitAnyIndexErrors": true,
  "paths": {
    "@/*": ["src/*"],
    "@@/*": ["src/.umi/*"]
  },
  "allowSyntheticDefaultImports": true
  },
  "include": [
  "mock/**/*",
  "src/**/*",
  "config/**/*"
  ],
  "exclude": ["node_modules", "dist", "src/.umi/*"]

• .eslintrc.js

  
  module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
  
  // in antd-design-pro
  globals: {
  ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
  page: true,
  REACT_APP_ENV: true,
  },
  parserOptions: {
  project: ['./tsconfig.eslint.json', './packages/*/tsconfig.json'],
  ecmaVersion: 12,
  sourceType: 'module',
  ecmaFeatures: true,
  tsconfigRootDir: __dirname,
  },
  rules: {},
  overrides: [
  {
    files: ['*.js', '*.ts', '*.jsx', '*.tsx'],
    rules: {
      'no-use-before-define': 'off', // 不能在定义之前使用
      'no-nested-ternary': 'off', // 不能嵌套三目运算符
      '@typescript-eslint/no-use-before-define': 'off', // 不能在定义之前使用
      'global-require': 'off', // 全局使用require
      'no-restricted-syntax': 'off', // 无限制语法
      '@typescript-eslint/no-unused-expressions': 'off',
      'import/no-extraneous-dependencies': 'off',
      'no-plusplus': 'off',
    },
  },
  ],
  env: {
  browser: true,
  es2021: true,
  },
  };

- config.ts

import { defineConfig } from 'umi'; import { Routes } from './routes';

const { REACT_APP_ENV } = process.env; let prox = {}; // 设置代理跟多环境 if (REACT_APP_ENV === 'lt') { prox = { '/audit': { target: 'http://localhost:9090', changeOrigin: true, secure: false, }, }; } export default defineConfig({ qiankun: { slave: {}, }, nodeModulesTransform: { type: 'none', }, // 开启dva dva: {}, // 路由配置 routes: Routes, proxy: prox, // antd: { // compact: true, // }, polyfill: { imports: ['core-js/stable'], }, history: { type: 'hash', }, });

## Mini Showcase Repository(REQUIRED)

> Please provide a repository using `yarn create @umijs/umi-app` then upload to your GitHub
> 请提供一个可复现的仓库，使用 `yarn create @umijs/umi-app` 创建，并上传到你的 GitHub 仓库

<!-- 为节约大家的时间，无复现步骤的 ISSUE 会被关闭，提供之后再 REOPEN -->
<!-- https://github.com/YOUR_REPOSITORY_URL -->

## How To Reproduce

**Steps to reproduce the behavior:** 1. 2.

**Expected behavior** 1. 2.

<!-- 请提供复现链接/步骤，错误日志以及相关配置 -->

## Context

- **Umi Version**:
- **Node Version**:
- **Platform**:

[ycjcl868]

create typings.d.ts file in the current workspace.

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
}