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

ice3.0约定式路由页面跳转时,css样式缺失 #6933

Closed LOL871230823 closed 3 months ago

LOL871230823 commented 3 months ago

Describe the bug

1、初始化登录 image

2、登录后进入首页,约定式路由,首页样式显示异常 image

3、刷新后首页正常显示 image

4、首页-返回登录,登陆页样式显示异常 image

5、登录页-刷新后正常显示 image

下面是演示demo

icestark-framework-dev.zip

Expected behavior

使用约定式路由策略时,可正常加载css资源

Actual behavior

登录后进入首页,约定式路由,首页样式显示异常 刷新后首页正常显示

Version of ice.js

"@ice/app": "^3.0.0",

Content of build.json or ice.config.mts

import { defineConfig } from '@ice/app';
import icestark from '@ice/plugin-icestark';
import fusion from '@ice/plugin-fusion';
import store from '@ice/plugin-store';
import request from '@ice/plugin-request';
import { modifyLoader } from '@ice/webpack-modify';

const options = {
  "rootValue": 1,
  "propList": [
    "*"
  ]
}
export default defineConfig(() => ({
  ssg: false,
  hash: 'contenthash',
  plugins: [
    fusion({}),
    icestark({ type: 'framework' }),
    store(),
    request(),
  ],
  routes: {
    ignoreFiles: [
      'custom.tsx',
      '**/components/**', 
    ],
    defineRoutes: (route) => {
      route('/', 'home/index.tsx');
    },
    config: []
  },

  webpack: (webpackConfig:any) => {
    webpackConfig.module.rules.push(      {
      test: /\.(mp4|webm|ogg|mp3|wav|avi|mov|flac|aac|mpeg|woff|woff2|eot|ttf|otf)$/i,
      type: 'asset',
      generator: {
        filename: 'assets/[hash][ext][query]',
      },
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024, 
        },
      },
    },);

    return modifyLoader(webpackConfig, {
      rule: '.less',
      loader: 'less-loader',
      options: (originOptions) => ({
        lessOptions: {
          javascriptEnabled: true, 
        },
      }),
    });
  },
}));

Additional context

No response

ClarkXia commented 3 months ago

微前端模式下异步加载的主应用样式无法自动被识别,参考文档处理

LOL871230823 commented 3 months ago

感谢大佬,已经解决了