一、问题描述

CSS全局样式，元素的样式，均无法被打包引入，样式引入的代码打包后，在生成main.js中直接没有。打包之后的代码都通过eval执行，但是无法找到上述样式代码。

二、问题分析

当初配置tree shaking的时候，没有太注意细节，就一直在package.json中配置 "sideEffects": false,。当时配置的时候出发点是好的，就是当我引入一个模块的时候,我不引入模块中所有的代码,而是仅引入使用的代码部分。当引入的模块没有使用的时候，就自动用tree shaking把它摇掉。

因为tree shaking只支持静态引入的方式，ES Module的形式；而不支持CommonJS的动态引入方式。因为动态引入的话，tree shaking不能确定在引入之前是需要或者不需要。
我刚好用ES Module的形式引入全局CSS样式，import './style/css'，导致的问题就是样式根本不会加载，直接被tree shaking摇掉了，默认当前css模块没有使用。有被自己坑到，检查了好久…

当使用CSS Module的时候，import style from ‘./style.css’; 有时候会突然加载出样式，当时觉得很迷惑，现在想想，只是在下面的React里面className中用到了 className={ style.btn }，从而全局样式就被加载了。现在终于想通了。

三、解决方法

解决方法：1. 其实我们可以使用require的方式，动态的引入css样式，从而避免被tree shaking摇掉。require('./style.css')
2. 对css文件不做tree shaking，在sideEffect中加入数组，[ “*.css” ]，不对css文件进行tree shaking。[推荐]

总结

细心打包，多多思考

sideEffects导致的全局样式消失相关推荐

antd select 下拉菜单的 style 属性_如何优雅地彻底解决 antd 全局样式问题
背景由于某些原因,我们团队负责在 GitLab 上做二次开发,简单理解就是在 GitLab 上挂个 DOM 渲染用 React 写的一些组件,组件库选择了 antd,尴尬的是引入之后发现,GitLa ...
【方法篇·壹】css开发技巧-全局样式设置和局部样式
目录前言: 1.全局样式和局部样式设置 2.提升效率重要方法 3.提升效率重要方法-集中处理UI样式 4.提升效率重要方法-学会复制 5. 提升质量方法-flex.百分比.rem布局 6.解决疑难杂 ...
vue 避免全局样式污染的正确做法
说明问题:样式全局污染产生的bug,会影响到其他页面原有的样式,导致每个页面的样式互相冲突,如果写的代码造成了全局样式污染,导致别人的页面每个地方都要去写自定义页面的代码,导致工作量巨大,严重的话,领 ...
Silverlight之添加全局样式
本文为原创文,难免会有一些小得瑕疵,敬请谅解. 所有示例均是博主测试过的,如有转载请标明出处,谢谢. 在Asp.Net中,我们可以使用Css+Div来控制样式,在Silverlight中我们也可以使用 ...
styled-components解决全局样式‘injectGlobal‘ 废除的问题
styled-components解决全局样式'injectGlobal' 废除的问题参考文章: (1)styled-components解决全局样式'injectGlobal' 废除的问题 (2) ...
滚动条全局样式修改与局部修改
全局的样式代码: ::-webkit-scrollbar {width: 10px;height: 10px;}/* 滚动条的滑块 */::-webkit-scrollbar-thumb {backg ...
element ui 设置全局样式不起作用
今天在写springboot+vue项目的时候出现这样一个问题,我想给所有的按钮添加一个样式,在全局样式表中添加了font-size:13px;但是不起作用,只有单独加到按钮上才起作用,于是到百度上查 ...
Vue使用全局样式，页面没有发生变化：逗号是中文的，引起错误，样式不变化也没有报错就是不起作用
因为html后面的逗号是中文符号的,不是英文符号的 /*全局样式表*/ html,body,#app {height: 100%;margin: 0;padding: 0; }
uniapp 全局样式
前言在App.vue中,可以一些定义全局通用样式,例如需要加一个通用的背景色,首屏页面渲染的动画等都可以写在App.vue中. 举例 <style>@font-face {font-fa ...

sideEffects导致的全局样式消失

文章目录

一、问题描述

二、问题分析

三、解决方法

总结

sideEffects导致的全局样式消失相关推荐

最新文章

热门文章