React加载DevExtreme样式表报MIME类型text/html非text/css问题问询

1 修正资源引用路径 #

public目录为React项目默认静态资源根目录，引用该目录下的资源时无需额外加/public前缀，恢复DevExtreme官方要求的dx-theme引入格式：

<link rel="dx-theme" data-theme="generic.light" href="/css/dx.generic.GenericLightProtis.css" data-active="true">

2 修复React Router拦截静态资源问题 #

访问CSS文件返回React根页面是因为BrowserRouter默认拦截所有路径请求，需要做如下配置：

针对CRA创建的项目 #

在项目根目录的package.json文件最外层添加配置：

"homepage": "."

修改完成后重启开发服务器即可生效。

针对自定义Webpack配置的项目 #

在Webpack配置文件的devServer字段下添加规则：

devServer: {
  historyApiFallback: {
    disableDotRule: true
  }
}

该配置会让服务器对带扩展名的静态资源请求直接返回对应资源，不会 fallback 到index.html。

3 补全DevExtreme主题初始化配置 #

在入口文件index.js的ReactDOM.render代码前添加主题初始化配置：

import DevExpress from 'devextreme/core/config';

DevExpress.config({
  themes: {
    current: 'generic.light'
  }
});

4 异常场景排查 #

如果上述配置完成后仍报错，逐一检查以下项：

• 项目是否配置了自定义代理规则，拦截了.css后缀的资源请求
• 项目是否安装了非官方的资源处理插件，篡改了静态资源的返回MIME类型
• 确认public/css目录下的目标CSS文件存在，且开发服务器有该文件的读取权限

内容的提问来源于stack exchange，提问作者Vlad SD