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: {},
};