build后，demo中引用的组件样式丢失

[git-lt]

Versions

• dumi:1.0.31
• node:13.x
• npm:13.x
• OS:mac os
• Browser:chrome

Steps to reproduce

提供了可复现的最小仓库 https://gitee.com/aitter/dumi-issues 按readme.md 可很快复现

What is Expected?

build之后，组件样式能正常引入

What is actually happening?

dev 环境，demo 中的组件样式正常 build 之后，demo中引用的组件样式丢失

[mortalYoung]

I think the reason is you set a wrong path in sideEffects you can try to set like this and it will work

"sideEffects": [
   "./src/**/style/**"
],

[PeachScript]

@mortalYoung 的推测是正确的，原因是 dumi 在构建文档时使用的不是组件库的产物而是组件库的源码，pkg/es 会被 alias 到 pkg/src，这样构建文档就不依赖于构建组件库。

但这样一来 sideEffects 的配置就必须指向 src 而不是 es，所以这个『特性』是否合理，或者有没有更好的方案，可以再讨论看看。

[kyo4311]

改一下 .fatherrc.ts

cssModules: { generateScopedName: '[name]__[local]___[hash:base64:5]' },

[PeachScript]

@kyo4311 CSS Modules 由于有显式依赖和使用，不会被 tree-shaking 掉；但组件库不建议启用 CSS Modules，会导致使用者很难进行样式复写

[wpnl]

@mortalYoung的推测是正确的，原因是dumi在合并文档时使用的不是组件库的生成的组件库的源码，pkg / es会被别名到pkg / src，这样可以将文档就不依赖于构建组件库。

但这样一来sideEffects的配置就必须指向src而不是es，所以这个『特性』是否合理，或者有没有更好的方案，可以再讨论看看。

我也有遇到这个，.fatherrc打包后样式被tree-shaking掉，但是我通过配置"sideEffects": false 改成 "sideEffects": [".less", ".css"],解决了这个问题，不过奇怪的是，这样配置后，文档打包样式还是会丢失，比如像上面说的一样，配置成 "sideEffects": [".less", ".css", "./src//style/"]才能解决问题，我的疑惑是，".less", ".css"不是已经包括后者了吗，为什么前面的配置不起作用呢。。

补充，后面发现，即使我写成 "sideEffects": []，fatherrc 打包样式不会丢失，所以问题应该是 sideEffects：false和 sideEffects：[]，有什么区别？我的理解是一样的，但是fatherrc打包出来的产物是不一样的

[git-lt]

@PeachScript md中引用css为什么要指向构建产物目录，不能直接指向源码目录呢，这里，我使用 import 'rui/es/BgImg/style'; 是因为 在 md 中直接引用 'rui/BgImg/style' 会报 [dumi]: cannot resolve module rui/BgImg/style

[DerrickTel]

build之后，引入的less没有被打包。.fatherrc.ts里面加了extractCSS: true, 还是不行，只是多了css文件，但是点到dist的js或者.d.ts里面引用的都是错误的。是我哪里配错了吗？或者说应该怎么配？

[gongfuxiaocai]

我也遇到同样的问题，打包后有引入样式，但是样式并没有大包进去，请问怎么解决呢？

[zhangyu1818]

感觉有点昏昏的，我写了sideEffects:false，而且js里没有导入css，但是最后出来的doc还是会有样式，虽然这是我想要的，但是不知道为什么 但是最后使用的时候还是需要写上import xxx/es/index.css，我的fatherrc配置只有

export default {
  esm: { type: 'babel' },
  lessInBabelMode: {},
};

[PeachScript]

@PeachScript md中引用css为什么要指向构建产物目录，不能直接指向源码目录呢，这里，我使用 import 'rui/es/BgImg/style'; 是因为 在 md 中直接引用 'rui/BgImg/style' 会报 [dumi]: cannot resolve module rui/BgImg/style

可以手动配置 alias pkg/es -> ./src 指向源码目录，目前不默认配置到 src 的原因是，es 是构建后的产物，可能会比 src 多出类型定义文件，但这个行为可以商榷，如果指向 src 更符合开发者的实际情况，那 v1.1 中可以改过来

[souse]

@PeachScript 想问下这个还是需要自己手动配置吗， 目前dumi + antd 封装业务组件 定制主题 src/style/theme.less 在 src/index.ts 内引用不能被打包

[xiaoxiong113]

怎么都是打包样式无效的问题，关键我还遇到了，折磨~

[yingzi4773]

我也遇到了，在package中加入"sideEffects": [ "./src/**/style/**" ], 相应的代码，还是打包后样式没加载上，大家后来是怎么解决的呢？ 求指导

[innocces]

demo中的样式添加sideEffects依然无法被打包 补充一下： 不是demo中引用的组件没有样式，而是单独的给demo写得部分样式，demo独立的less没有被打包进去

├── packages
│   ├── libaryA
│   │     ├── src
│   │     │   ├── componentA
│   │     │   │   ├── demos
│   │     │   │   │   └── index.tsx
│   │     │   │   │   └── index.less
│   │     │   │   ├── index.md
│   │     │   │   ├── index.tsx
│   │     │   │   ├── package.json
│   │     │   │   └── style
│   │     │   │       ├── index.less
│   │     │   │       └── index.tsx

[xiaoxiong113]

import { defineConfig } from 'dumi'; import path from 'path' import Logo from './public/logo' const resolve = (dir) => path.resolve(__dirname, dir)

export default defineConfig({ title: 'UI', favicon: Logo, logo: Logo, outputPath: 'docs-dist', mode: 'site', styles: [.__dumi-default-navbar-logo { padding-left: 85px!important; }], // more config: https://d.umijs.org/config extraBabelPlugins: [ [ 'babel-plugin-import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }, ], ], chainWebpack(memo, { env, webpack, createCSSRule }) { memo.merge({ module: { rules: [ { test: /.(js|jsx|ts|tsx)$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript' ], plugins: [ '@babel/plugin-transform-runtime', // polyfill补全语法 ['import', { libraryName: 'antd', style: 'css' },] ] } }, }, { test: /.(png|jpe?g|gif)$/, loader: 'url-loader', options: { name: 'assets/[name].[ext]', limit: 1024, publicPath: './' } } ] } }) // console.log('%c 🥪 memo: ', 'font-size:20px;background-color: #ED9EC7;color:#fff;', memo.module.rules); // 设置 alias // memo.resolve.alias.set('@/', './src/') }, });

// alias 无效

[johnsmithsren]

我的情况是，开发时候添加的自定义组件样式是正常的，但是一旦发布到npm之后，项目install之后，自定义样式会出现丢失，看到大家说要加sideEffect,始终无效，在package.json 中删除sideeffect 这个参数 ，发现可以了，通过一堆github 上的dumi+antd的项目的配置文件，试了半天，发现可以了，如果后续有人实在解决不了，可以参考下面这些配置试试，我不确定是不是sideeffects 的问题，package中没啥特别的，就是dumi官方配置。

fatherrc.ts

export default { esm: 'babel', lessInBabelMode: true, };

umirc.ts

import { defineConfig } from 'dumi'; export default defineConfig({ title: '组件', favicon: '/images/logo-light.png', logo: '/images/logo-light.png', outputPath: 'docs-dist', mfsu: {}, webpack5: {}, dynamicImport: {}, extraBabelPlugins: [ [ 'babel-plugin-import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }, ], ], });

组件内部引用

import './style.less';

tsconfig

{ "compilerOptions": { "target": "esnext", "module": "esnext", "moduleResolution": "node", "jsx": "react", "esModuleInterop": true, "strict": true, "skipLibCheck": true, "declaration": true, "sourceMap": true, "baseUrl": "./", "paths": { "@/": [ "src/" ], "@@/": [ "src/.umi/" ] }, "allowSyntheticDefaultImports": true }, "exclude": [ "node_modules", "**/test", "test", "tests", "docs" ] }

[yingzi4773]

同学，你的简历已收到，马上进行内推哦~

[CJY0208]

@yingzi4773 目测发错地儿了

[cx91]

可以看看子组件的package.json 里面 sideEffects属性值 "sideEffects": true, 代表有副作用 我把这个属性改为true或者删除就有样式了

[yingzi4773]

同学，你的简历已收到，马上进行内推哦~

[rorivers]

使用dumi开发公司用到组件库。 开启tree shaking，并用package.json中的sideEffects属性来控制。 dumi build后，在业务项目中使用组件库，样式正常。 dumi dev时，demo中的组件库样式丢失。

经调查，dumi dev时，demo里组件库名会被alias到pkgSrc下， 而dumi build时，组件库会正常到dist、es、lib下。

故而，解决办法为： 修复package.json中的sideEffects配置 "sideEffects": [ "dist/*", "es//style/*", "lib/*/style/", "src//style/", ".less" ], 将dist、es、lib、src下的style都设置为有副作用。

[yingzi4773]

同学，你的简历已收到，马上进行内推哦~

[li-yu-tfs]

@PeachScript 想问下这个还是需要自己手动配置吗， 目前dumi + antd 封装业务组件 定制主题 src/style/theme.less 在 src/index.ts 内引用不能被打包

这怎么解决的呢 我发现如果我本身项目没有引入antd的话，我的组件库引入了antd，我的项目引入了组件库的组件，组件就没有样式

[li-yu-tfs]

没有看到具体的介绍啊？

[xiaoxiong113]

你试试我这个配置里的extraBabelPlugins，https://github.com/umijs/dumi/issues/225#issuecomment-864761777

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2022年10月21日(星期五) 下午4:47 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [umijs/dumi] build后，demo中引用的组件样式丢失 (#225)

@PeachScript 想问下这个还是需要自己手动配置吗， 目前dumi + antd 封装业务组件 定制主题 src/style/theme.less 在 src/index.ts 内引用不能被打包

这怎么解决的呢 我发现如果我本身项目没有引入antd的话，我的组件库引入了antd，我的项目引入了组件库的组件，组件就没有样式

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

[li-yu-tfs]

我现在遇到的问题主要是，我组件库使用了antd，而项目里面如果没使用antd的话，项目使用组件库的话，组件库里面也没了antd的样式了，试了你的方案还是不行

[xiaoxiong113]

你这个就是样式文件没有打入组件库的包

------------------ 原始邮件 ------------------ 发件人: @.>; 发送时间: 2022年10月21日(星期五) 下午5:28 收件人: @.>; 抄送: @.>; @.>; 主题: Re: [umijs/dumi] build后，demo中引用的组件样式丢失 (#225)

我现在遇到的问题主要是，我组件库使用了antd，而项目里面如果没使用antd的话，项目使用组件库的话，组件库里面也没了antd的样式了，试了你的方案还是不行

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

[muidea]

我现在遇到的问题主要是，我组件库使用了antd，而项目里面如果没使用antd的话，项目使用组件库的话，组件库里面也没了antd的样式了，试了你的方案还是不行

请问你这个问题最后怎么解决的。我遇到了类似的问题。formily官网上的示例我看到加载了完整侧antd.css 我基于dumi搭建的实验环境同样的代码，就没有加载到对应的antd的样式

[muidea]

同时另外的一个实例运行就是正常显示