如何解决Nuxt.js extractCSS破坏了CSS源地图
简短说明:
如果我在nuxt.config.js
中使用extractCSS: true
,则生成的CSS文件没有关联的源映射(大多数时间)。
详细说明:
问题取决于两件事:
-
extend
build
配置 - 使用
npm run dev
或npm run build
生成文件。
详细信息:
- 如果不包括
config.devtool = '*source-*map'
指令,则根本不会为CSS文件生成任何源映射。这可能是预期的行为,很好,我们需要将其包括在内。 - 如果包含
config.devtool = '*source-*map'
指令,则将为css文件生成源映射,如下所示:-
npm run build
:无论选择哪个webpackconfig.devtool
,根本不会为css文件生成任何源映射。 -
npm run dev
:- 使用
config.devtool = 'source-map'
生成CSS源映射 - 使用
config.devtool = 'eval-cheap-module-source-map'
或config.devtool = 'eval-cheap-source-map'
或config.devtool = 'eval-source-map'
不会生成CSS源映射
- 使用
-
现在这不是悲剧,但是source-map
的性能可能比eval-*
选项差很多,因此对于具有实时刷新功能的dev
模式,如果也很好。
我的问题是:我做错了还是预期的行为?
PS1:
实际上,如果extractCSS: false
没有css
文件可为其生成源映射,则在这种情况下没有问题。一切都进入了JS文件,并为这些文件生成了源映射。
PS2:
同时,我仅将extractCSS: false
用于dev
,因为在那种情况下,无论如何都不需要为了改善缓存而分离css文件。另一方面,对于build
,我将使用extractCSS: true
来受益于单独的CSS文件的缓存,并且我可以在没有源映射的情况下进行生产部署。
在我眼中,理想的配置是在生产中使用带有源地图的单独的css文件,同时对常规访问者隐藏源地图,并使开发人员只能访问它们。
您认为Nuxt(或Webpack)无法做到这一点吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。