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

git-lt · 2020-06-28T12:13:42Z

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 · 2020-07-08T14:44:38Z

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 · 2020-07-09T02:13:04Z

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

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

kyo4311 · 2020-07-17T10:50:42Z

改一下 .fatherrc.ts

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

PeachScript · 2020-07-22T02:56:48Z

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

wpnl · 2020-07-26T03:32:35Z

@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 · 2020-07-31T02:53:18Z

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

DerrickTel · 2020-07-31T14:57:23Z

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

gongfuxiaocai · 2020-08-27T03:03:55Z

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

zhangyu1818 · 2020-09-03T13:26:13Z

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

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

PeachScript · 2020-09-07T09:02:25Z

@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 · 2021-04-26T09:51:29Z

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

xiaoxiong113 · 2021-05-12T07:27:43Z

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

innocces · 2021-06-21T06:09:09Z

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 · 2021-06-21T06:22:42Z

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 · 2021-12-28T07:53:41Z

我的情况是，开发时候添加的自定义组件样式是正常的，但是一旦发布到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"
]
}

CJY0208 · 2021-12-28T08:42:56Z

@yingzi4773 目测发错地儿了

cx91 · 2022-01-12T09:24:34Z

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

rorivers · 2022-07-07T01:30:58Z

使用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都设置为有副作用。

li-yu-tfs · 2022-10-21T08:47:08Z

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

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

li-yu-tfs · 2022-10-21T09:07:05Z

没有看到具体的介绍啊？

xiaoxiong113 · 2022-10-21T09:24:02Z

你试试我这个配置里的extraBabelPlugins，#225 (comment)

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 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 · 2022-10-21T09:28:36Z

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

xiaoxiong113 · 2022-10-21T09:29:56Z

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

…

------------------ 原始邮件 ------------------ 发件人: ***@***.***>; 发送时间: 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 · 2024-11-13T14:29:23Z

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

请问你这个问题最后怎么解决的。我遇到了类似的问题。formily官网上的示例我看到加载了完整侧antd.css

我基于dumi搭建的实验环境同样的代码，就没有加载到对应的antd的样式

muidea · 2024-11-13T14:31:14Z

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

git-lt added the bug Something isn't working label Jun 28, 2020

git-lt changed the title ~~build后，组件样式丢失 bug:~~ build后，demo中引用的组件样式丢失 Jun 28, 2020

PeachScript mentioned this issue Jul 9, 2020

请问为什么dumi build后发布到 Github Page，样式都丢失了呢？ #213

Closed

PeachScript added discuss Something need to discuss and removed bug Something isn't working labels Jul 9, 2020

PeachScript mentioned this issue Aug 22, 2020

yarn docs:build 之后部署在github但是没有样式使用的是scss #296

Closed

git-lt closed this as completed Oct 12, 2020

This comment was marked as off-topic.

Sign in to view

liuweiGL mentioned this issue Jun 7, 2021

fix(antd/next): fix dumi lost style due to treeshaking alibaba/formily#1549

Merged

6 tasks

PeachScript mentioned this issue Jul 16, 2021

bug: dumi build 无法根据自定义的customStyleName 进行样式按需导入 #773

Closed

PeachScript mentioned this issue Oct 9, 2021

在antd组件上又封装一层，打包之后，引用出现样式和自定义的less文件没有加载 #863

Closed

This comment was marked as off-topic.

Sign in to view

This was referenced Jan 5, 2022

本地start运行正常，build之后引用组件，antd的组件样式是有的，但是自定义样式丢失了 #898

Closed

基于antd封装一个私有npm包，但打包后只有Button有样式，其他组件样式丢失 #956

Closed

This comment was marked as off-topic.

Sign in to view

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

git-lt commented Jun 28, 2020

mortalYoung commented Jul 8, 2020

PeachScript commented Jul 9, 2020

kyo4311 commented Jul 17, 2020

PeachScript commented Jul 22, 2020

wpnl commented Jul 26, 2020 •

edited

Loading

git-lt commented Jul 31, 2020

DerrickTel commented Jul 31, 2020

gongfuxiaocai commented Aug 27, 2020

zhangyu1818 commented Sep 3, 2020

PeachScript commented Sep 7, 2020

souse commented Apr 26, 2021

xiaoxiong113 commented May 12, 2021

This comment was marked as off-topic.

innocces commented Jun 21, 2021 •

edited

Loading

xiaoxiong113 commented Jun 21, 2021 •

edited

Loading

johnsmithsren commented Dec 28, 2021 •

edited

Loading

This comment was marked as off-topic.

CJY0208 commented Dec 28, 2021

cx91 commented Jan 12, 2022

This comment was marked as off-topic.

rorivers commented Jul 7, 2022

This comment was marked as off-topic.

li-yu-tfs commented Oct 21, 2022

li-yu-tfs commented Oct 21, 2022

xiaoxiong113 commented Oct 21, 2022 via email

li-yu-tfs commented Oct 21, 2022

xiaoxiong113 commented Oct 21, 2022 via email

muidea commented Nov 13, 2024

muidea commented Nov 13, 2024

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

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

Comments

git-lt commented Jun 28, 2020

Versions

Steps to reproduce

What is Expected?

What is actually happening?

mortalYoung commented Jul 8, 2020

PeachScript commented Jul 9, 2020

kyo4311 commented Jul 17, 2020

PeachScript commented Jul 22, 2020

wpnl commented Jul 26, 2020 • edited Loading

git-lt commented Jul 31, 2020

DerrickTel commented Jul 31, 2020

gongfuxiaocai commented Aug 27, 2020

zhangyu1818 commented Sep 3, 2020

PeachScript commented Sep 7, 2020

souse commented Apr 26, 2021

xiaoxiong113 commented May 12, 2021

This comment was marked as off-topic.

innocces commented Jun 21, 2021 • edited Loading

xiaoxiong113 commented Jun 21, 2021 • edited Loading

johnsmithsren commented Dec 28, 2021 • edited Loading

This comment was marked as off-topic.

CJY0208 commented Dec 28, 2021

cx91 commented Jan 12, 2022

This comment was marked as off-topic.

rorivers commented Jul 7, 2022

This comment was marked as off-topic.

li-yu-tfs commented Oct 21, 2022

li-yu-tfs commented Oct 21, 2022

xiaoxiong113 commented Oct 21, 2022 via email

li-yu-tfs commented Oct 21, 2022

xiaoxiong113 commented Oct 21, 2022 via email

muidea commented Nov 13, 2024

muidea commented Nov 13, 2024

wpnl commented Jul 26, 2020 •

edited

Loading

innocces commented Jun 21, 2021 •

edited

Loading

xiaoxiong113 commented Jun 21, 2021 •

edited

Loading

johnsmithsren commented Dec 28, 2021 •

edited

Loading