react打包部署到服务器上样式加载不出来

问题

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文件集中打包