👑 [需求] 移除*.less中的@import ~ 前置符号，兼容ESM构建工具

tianxing0923 commented 3 years ago

🥰 需求描述

移除*.less中的@import ~前置符号，兼容ESM构建工具，例如：Vite

🧐 解决方案

less-loader 现在也推荐移除 ~ 符号 https://github.com/webpack-contrib/less-loader#imports

🚑 其他信息

chenshuai2144 commented 3 years ago

来个pr支持一下？

wlc534 commented 3 years ago

在snowpack项目中也是无法运行， https://github.com/ant-design/pro-components/issues/1885

yunsii commented 3 years ago

还没搞定？

yunsii commented 3 years ago

暂时通过这个方式解决：https://github.com/vitejs/vite/issues/2185#issuecomment-784637827 _(:3J∠)_

chenshuai2144 commented 3 years ago

要 umi 提个 pr，我一直没空搞

yunsii commented 3 years ago

要 umi 提个 pr，我一直没空搞

这是什么意思？跟 umi 有什么关系吗？:joy:

chenshuai2144 commented 3 years ago

我们项目使用 umi做脚手架的，改了之后我们的项目就跑不起来

yunsii commented 3 years ago

我们项目使用 umi做脚手架的，改了之后我们的项目就跑不起来

这样啊，那我觉得 vite 用我楼上的临时方案也挺好的。umi 要做这个支持改动大吗？不太了解这一块。

chenshuai2144 commented 3 years ago

不大，增加个预设就行了，兼容原来的

chenshuai2144 commented 3 years ago

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
            options: {
              lessOptions: {
                paths: [path.resolve(__dirname, "node_modules")],
              },
            },
          },
        ],
      },
    ],
  },
};

这行加进去，你有兴趣可以试试

yunsii commented 3 years ago

好像在这里 https://github.com/umijs/umi/blob/master/packages/bundler-webpack/src/getConfig/css.ts#L173 修改就行了，有时间的话争取本周搞定。

less-options-include-paths

yunsii commented 3 years ago

@chenshuai2144 大佬看看这样处理对吗？这个没有测试用例

chenshuai2144 commented 3 years ago

link 到项目中试试呢？

pro 项目就是用来做这种测试的

yunsii commented 3 years ago

@chenshuai2144 好像问题挺大的，先在本地 link 试了一下，解析失败。重新研究了相关文档，最后看了 less-loader 的 release 发现了问题：

⚠ BREAKING CHANGES minimum supported webpack version is 5

如果按照 release 的说法，less-loader@8.x 配合 webpack@5.x 应该是啥都不用改的 :joy: 那现在 umi 还兼容 webpack@4.x，考虑到大量的遗留代码的话，这个问题好像不太好搞。

至于像 Vite 之类的构建工具，短期来看可能还是上面提到的通过 alias 的方式更有效：

export default defineConfig({
  // ...
  resolve: {
    alias: [
      { find: /^~/, replacement: '' }
    ],
  }
});

chenshuai2144 commented 3 years ago

这个看来还需要一段时间才能实现

jalopez526 commented 2 years ago

This PR fixes this error im having?

node_modules/@ant-design/pro-field/lib/components/Code/index.d.ts:2:64 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

2 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & {
                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/Code/index.d.ts:2:116 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

2 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & { 
                                                                                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/DatePicker/index.d.ts:3:64 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

3 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & {
                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/DatePicker/index.d.ts:3:116 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

3 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & {
                                                                                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/Money/index.d.ts:9:64 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

9 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & FieldMoneyProps & React.RefAttributes<any>>;
                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/Money/index.d.ts:9:116 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

9 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & FieldMoneyProps & React.RefAttributes<any>>;
                                                                                                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/Percent/index.d.ts:12:64 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

12 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & PercentPropInt & React.RefAttributes<any>>;
                                                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/Percent/index.d.ts:12:116 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

12 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & PercentPropInt & React.RefAttributes<any>>;
                                                                                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/Progress/index.d.ts:3:64 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

3 declare const _default: React.ForwardRefExoticComponent<import("../../../../provider/lib").BaseProFieldFC & import("../../../../provider/lib").ProRenderFieldPropsType & {
                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/@ant-design/pro-field/lib/components/Progress/index.d.ts:3:116 - error TS2307: Cannot find module '../../../../provider/lib' or its corresponding type declarations.

Sorry to ask, can't understand chinese and google doesn't help much :(

ESnail commented 2 years ago

打包时，ts 转 js，有2中方式：tsc 、babel。

具体区别：https://www.typescriptlang.org/docs/handbook/babel-with-typescript.html#babel-vs-tsc-for-typescript

上面的报错，是打包用了 tsc 方式。比如vite，可以看package.json脚本："build": "tsc && vite build",

由于 tsc 打包会做类型校验。导致上面的错误，因为底层的路径错了，pro-components里.d.ts声明没有provider目录，只有pro-provider目录。

可考虑用 babel 方式打包，实测可行。

package.json: "build": "vite build"

vite.config.js 参考

import babel from 'rollup-plugin-babel';
import { DEFAULT_EXTENSIONS } from '@babel/core';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      babel({
        exclude: 'node_modules/**',
        extensions: [
          ...DEFAULT_EXTENSIONS,
          '.ts',
          '.tsx'
        ]
      }),
    }
  }
})

或者tsconfig.json 中改。tsconfig 配置参考：https://www.tslang.cn/docs/handbook/compiler-options.html

skipLibCheck: true // 默认是 false. 忽略库的默认声明文件的类型检查。

可能改后还是有问题。没具体实践，后来看到的。

netcore-jroger commented 2 years ago

import babel from 'rollup-plugin-babel';
import { DEFAULT_EXTENSIONS } from '@babel/core';

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: babel({
      exclude: 'node_modules/**',
      extensions: [
        ...DEFAULT_EXTENSIONS,
        '.ts',
        '.tsx'
      ]
    })
  }
})

@ESnail

Justinidlerz commented 2 years ago

The less-transformer of the Parcel v2 has the same problem. And that will throw an error see like:

@parcel/transformer-less: The @import path "~antd/es/style/themes/index.less" is using webpack specific syntax, which isn't supported by Parcel.

To @import files from node_modules, use "antd/es/style/themes/index.less"

Actually, the import is coming from this library, I cannot modify the import path directly.

Do we have some news on the issue?

chenshuai2144 commented 1 year ago

已经告别了 less了，现在可以很简单的使用了

yunsii commented 1 year ago

已经告别了 less了，现在可以很简单的使用了

看起来 pro-components 也重构成 cssinjs 了，那服务端渲染是不是要做特殊处理才行？

wzlwangzhilin commented 4 months ago

我们的项目用umi做脚手架的，改了之后我们的项目就跑不起来

这个有解决吗？

ant-design / pro-components