search

alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React（基于 React 的渐进式应用框架）
https://ice.work
MIT License
17.83k stars 2.09k forks source link

为什么会应用两份一样的样式? #4913

Open worklinwu opened 2 years ago

worklinwu commented 2 years ago

我运行从官网下载下来的基于antd的模板代码, 在控制台中发现应用了两份样式. 调试发现, 一份样式是 global.css 引入的样式(被覆盖), 一份可能是 vite 按需加载的.

如果vite按需加载的代码或者其他原因导致的样式覆盖, 我要怎么才能去掉它?

image image image

worklinwu commented 2 years ago

补充信息:
进一步调试, 打包后的样式正常, 所以是不是在开发模式下, vite 按需加载的插件被开启了.

这个会影响到less变量的覆盖问题.

@import 'antd/dist/antd.less';
@import './var.less'; // @primary-color: #ffa22d;

上面这行代码在开发模式下是无效的, 会被按需加载进来的样式覆盖.
但是在项目打包后预览时有效的.

ClarkXia commented 2 years ago

@worklinwu 提供下 build.json 信息

worklinwu commented 2 years ago

@worklinwu 提供下 build.json 信息

{
  "vite": true,
  "plugins": [
    [
      "build-plugin-ignore-style",
      {
        "libraryName": "antd"
      }
    ]
  ]
}

我是拿官方的脚手架未作多余修改进行测试的.

ClarkXia commented 2 years ago

两份内容的原因是默认有全量的 antd 样式引入（global.less）中，而组件中使用的 antd-layout-pro 默认又有自身的样式依赖。 对于 less变量的覆盖问题，在 vite 模式 dev 的时候每个脚步 / 样式加载都是独立编译的，因此其他样式加载的时候不包含自定义样式，而在打包的时候走统一编译的时候对引入的所有文件都生效了，推荐通过 https://ice.work/docs/plugin/list/antd#usage 的方式应用主题。 后续我们也会关注下这块的最佳实践