昨天(2021-10-13)一个react项目打包后的页面样式全乱了,而本地开发时样式是正常的,花了半天时间研究了这个问题,现在把整个过程记录下。
先说下原因,原因是一个同事在 webpack.config.js 里的 module rules 下面新加了一个规则
{ test: /.svg$/, use: ['raw-loader'] },
这个规则会把 svg 图片里的内容读成字符串,但我在我的js文件里引入了 iconfont.css
import './style/repairIcon/iconfont.css'
继续追踪下去发现 iconfont.css 里有一行代码
url('iconfont.svg?t=1594257335620#iconfont')
就是这行代码导致打包后的css文件不能用,在没有在 webpack.config.js 里加入上面那个规则的时候,这行代码在打包后的css里是这样的
url(/static/media/iconfont.****.svg)
加了上面这个规则后,这行代码在打包后的css里就变成了这样
url('********')
raw-loader插件把 iconfont.svg 里的内容都读成了字符串写入了打包后的css里,svg内容字符串里有换行符,在mac电脑上打包时换行符是 ,在css文件里不会出错,
但在window电脑上打包的css文件里换行符变成了 /n,导致打包后的css文件报错,整个css文件都不能用
我思考后解决方法有两种:
1、我查看了代码后发现没有用到 iconfont.css,就不再引入 iconfont.css
//import './style/repairIcon/iconfont.css'
2、第二种方法我没有实践过,在
{ test: /.svg$/, use: ['raw-loader'] },
这个配置规则里加一个 exclude 参数,把某些svg图片排除