arco-design/arco-cli

style/index.ts 引入css文件，打包后无效

lin-mt opened this issue · 5 comments

lin-mt commented

Describe the bug
style/index.ts 引入其他 css 文件 import 'antd/dist/antd.min.css';，没有一起打包，如果使用引入整个文件夹的方式import 'antd/dist'; 则启动会报以下错误：

ModuleNotFoundError: Module not found: Error: Can't resolve 'antd/dist' in '/Users/lin-mt/WebstormProjects/json-schema-editor-antd/src/style'
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/webpack/lib/Compilation.js:925:10
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/webpack/lib/NormalModuleFactory.js:401:22
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/webpack/lib/NormalModuleFactory.js:130:21
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/webpack/lib/NormalModuleFactory.js:224:22
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/neo-async/async.js:2830:7
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/neo-async/async.js:6877:13
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/webpack/lib/NormalModuleFactory.js:214:25
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/enhanced-resolve/lib/Resolver.js:213:14
    at /Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/enhanced-resolve/lib/Resolver.js:285:5
    at eval (eval at create (/Users/lin-mt/WebstormProjects/json-schema-editor-antd/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
resolve 'antd/dist' in '/Users/lin-mt/WebstormProjects/json-schema-editor-antd/src/style'
  Parsed request is a module
  using description file: /Users/lin-mt/WebstormProjects/json-schema-editor-antd/package.json (relative path: ./src/style)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      /Users/lin-mt/WebstormProjects/json-schema-editor-antd/src/style/node_modules doesn't exist or is not a directory
      /Users/lin-mt/WebstormProjects/json-schema-editor-antd/src/node_modules doesn't exist or is not a directory
      /Users/lin-mt/WebstormProjects/node_modules doesn't exist or is not a directory
      /Users/lin-mt/node_modules doesn't exist or is not a directory

To Reproduce
Steps to reproduce the behavior:

  1. 在 style/index.ts 引入 import 'antd/dist/antd.min.css';
  2. npm publish
  3. 使用发布后的组件物料
  4. 除了需要引入组件物料的样式文件外，还需要单独引入 import 'antd/dist/antd.min.css';

Expected behavior
打包发布后，使用时只需要引入 import '@物料名称/dist/css/index.css';

Screenshots

Desktop (please complete the following information):

  • OS: MacOS
  • node version v16.13.1

Additional context
Add any other context about the problem here.

MisterLuffy commented

写成 import (less) '~antd/dist/antd.min.css'; 试下呢。 ~ 是告诉 less 这是一个 node_modules 文件，(less) 告诉 less 将其当做 less 文件来解析。

lin-mt commented

import (less) '~antd/dist/antd.min.css';

image

这样子写不行哦

lin-mt commented

image

这样子写也不行哦

lin-mt commented

可以了哈～