问题
react打包部署到服务器上样式加载不出来。
其实经过仔细核查代码,发现本地能加载出来所有样式,在index.js首页的样式也能加载出来,但是每个路由组件的自定义样式不能加载出来。
问题前提
在项目中进行了动态import,且路由组件本身引入了自定义的css文件
在服务器端或者index.html页面设置了 内容安全策略Content-Security-Policy style-src 限制层叠样式表文件源。
示例
动态import加载示例
const Login = () => import('@/xxx/xxx/login');
内容安全策略示例
原因
首先我们需要先了解webpack的打包方式,当我们使用动态import的时候,webpack就默认了项目将以多个入口的方式进行打包。从而将每个动态import的组件进行单独生成js,单独生成js的时候,将会把该组件内的css也打包进入到js文件中。而打包后的单独的路由组件会动态的向index.html中插入style标签。
然后假如我们同时在项目的html中或者服务器端配置了 内容安全策略Content-Security-Policy style-src ,那么每个路由组件的style就不能插入到html中。
webpack的打包规则
每个文件都是一个资源,可以用require/import导入js
每个入口文件会把自己所依赖(即require)的资源全部打包在一起,一个资源多次引用的话,只会打包一份
对于多个入口的情况,其实就是分别独立的执行单个入口情况,每个入口文件不相干(可用CommonsChunkPlugin优化)
解决办法(以下方法实现一个就行)
方法一:将动态import改成静态引入,防止按需加载。
方法二:去掉内容安全策略的style-src: self限制。
方法三:将所有样式都在index.js入口处引入。
方法四:修改webpack的打包规则,将所有的css文件集中打包