踩坑系列：webpack打包后，css文件样式都消失了

最新推荐文章于 2023-09-21 15:37:32 发布

原创最新推荐文章于 2023-09-21 15:37:32 发布 · 4.9k 阅读

6 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了解决Webpack在production模式下导致CSS文件丢失的问题。通过调整package.json中的sideEffects配置，避免Webpack的Tree-Shaking误删CSS资源。

我在查看webpack文档学习的时候，发现打包后css文件及样式都没有了，但是一开始学习的时候没有这个问题的。

经过一番排查发现有一个坑，就是当webpack.config.js里面的mode为production时，如果webpack设置了tree-shaking导致把css摇树摇跑了，郁闷啊~~

webpack的tree-shaking就是在package.json的sideEffects进行设置，我当时就是设置为sideEffects:false的。

然后我将sideEffects设置为如下，问题就解决了：

"sideEffects": [
  "*.css"
  //假如还有其他不想要摇树要走的，就在这里继续添加吧
]

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

QQmm~~

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

webpack tree shaking 踩坑

qq_34356563的博客

12-14

1339

首先描述一下问题场景一个项目中webpack升级到4.x.x版本后在development模式下项目是完全正常工作的，但是在production模式下没有把antd的css文件打包进去。项目中webpack和antd的版本如下： antd:3.4.5 webpack:4.27.0 项目中我们是这样引入antd的样式文件的： import 'antd/dist/antd.css'; ...

Figma插件开发：Webpack和figma-plugin-ds

hufang360的专栏

12-24

1674

一个前端新手，最近在写Figma插件，插件主要是写给自己用。由于功能不多，之前组件和样式是自己手写的css，调来调去使用体验也不好，Figma说目前还没有官方的ui组件库，大家可以试试 figma-plugin-ds （后面简称ds），组件样式和svg图标跟figma原生的一样，虽然有些figma上很细节的功能还做不到，比如在输入框的边缘移动能调整数值，但做一个简单的面板还可以。要快速上手，可以直接在html里引用css和js的在线地址。但由于文件在github上，启动插件时ui样式要等加载完才显示正常

参与评论您还未登录，请先登录后发表或查看评论

webpack打包后部分css样式丢失问题

G-shitou的博客

08-30

3934

最近在打包Vue项目之后，发现css中有部分代码消失了，查阅网上类似的问题，依次试了试，终于解决了。首先尝试注释掉 webpack.prod.conf.js 中下面的代码，发现有一部分代码生效了，但是还是有css代码打包后丢失。 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ...

css打包丢失,webpack打包build时css样式-webkit-box-orient丢失问题的解决方案

weixin_39864373的博客

08-03

1357

最近遇到一个奇怪的问题，在设置超出n行即显示省略号的css时，开发环境都没有问题，而build之后发现不好使，通过调试发现是-webkit-box-orient这个样式丢失了我写的css样式display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;打包之后的css样式，缺少-we...

webpack打包测试环境正常,生产环境漏掉了css文件

普普通通的博客！

07-01

1362

在使用不同环境对项目打包之后，发现生产环境的css文件没有全部被挂载，缺失了一部分，但是测试环境的是正常的。就是图里面的这几个文件，打包生产环境以后缺失了。在一番搜索之后，发现有个概念叫做tree shaking。就是说生产环境（production）在打包的时候，会默认把一些dead code，也就是代码中看起来没有引用到，没有用上的代码，自动过滤掉。那么取消过滤不就好了？或者能不能够把这个tree shaking的功能关掉呢？又搜索了一番，发现大家都是建议说在package.json里面，调整“sid

Webpack打包之后[-webkit-box-orient: vertical]样式丢失

weixin_30670925的博客

06-06

187

背景：项目是用的vue全家桶套餐今天在工作中遇到一个问题，需求是要求文字只能显示3行，超过3行则隐藏且显示 '...'，于是我加了如下样式在标签里面： display: -webkit-box;-webkit-line-clamp: 3;line-height: 20px;max-height: 60px;overflow: hidden;text-overflow: ellipsis...

antd+typescript webpack打包后样式丢失

广兰路地铁的博客

05-02

3931

问题描述最近笔者最近正在将老的项目迁移至typeseript,项目跑起来之后发现antd相关的样式全部丢失，发现webpack打包后css相关的代码没有被提取出来，导致antd的样式全部无效化，原先的webpack配置文件： module: { rules: [ { test: /\.(js|jsx)$/, ...

Webpack4.0 打包工具基本操作教程小白篇

Zeus

04-24

637

前言我们在开发项目时，会用到很多的静态资源，我们在浏览器，浏览网页时，网页加载的速度就会变慢，而且有很多的文件都是相互依赖的。总结网页加载速度慢，因为我们要发起很多的二次请求要处理错综复杂的依赖关系如何解决合并、压缩、精灵图、图片的Base64编码 requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系 webpack是什么呢 webpack 是前端的一个项目...

Vue项目升级到Webpack 4.x初步踩坑总结

热门推荐

harsima的博客

06-26

2万+

Vue项目升级到Webpack 4.x初步踩坑总结，包括压缩JS/CSS，分离CSS/提取CSS到单独文件，分离Chunk，以及vue-loader 15.x版本的使用和基于vue项目的修改

Vue - 5 - 模块化 - commonJS、ES6-Modules、webpack、工程目录、（处理：css、less、图片、vue、搭建服务器）

LawssssCat的博客

02-29

1212

文章目录# 为什么需要模块化# 模块化？组件化？# 匿名函数的解决方案 # 为什么需要模块化回顾下 JavaScript 原始功能在网页开发的早期， js 制作作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。那个时候的代码是怎么写的呢？直接将代码写在 <script> 标签中即可随着 ajax 异步请求的出现，慢慢形成了前后端的分离客户端需要...

less loader 打包后样式丢失_webpack实战——预处理器(loader)【下篇】

weixin_34354231的博客

12-03

541

写在前面这是webpack实战系列笔记的第6篇记录，前几篇记录如下：打包第一个应用模块化与模块打包资源输入与输出一切皆模块预处理器【上篇】在上一篇中根据一切皆模块的思想，学习了解了loader：概述、引入、配置及使用。本篇接着上篇的话题，讲述常用loader。在我们项目开发中，尤其是目前流行的单页面应用，一些新手经常会在loader配置中有一些疑问，比如：对于xx资源应该使用哪个load...

webpack样式失效，打包生产环境，开启cssModule

weixin_30980795的博客

09-16

1390

webpack打包生产环境样式失效：生产环境中，webapck把我的样式文件删掉了，原因在于tree-share 补补知识 tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 “sideEffects” 属性作为标记，向 compiler 提供提示，表明项目

vue 自建的css文件打包后找不到

wangooo的博客

09-21

1476

vue中使用固定的css文件

webpack 打包成功，但是css不起作用

weixin_34293911的博客

04-17

1025

问题: webpack 打包成功，但是css不起作用问题分析/解决: 原因有以下几种使用了webpack2的语法规则不正确; webpack2要求必须写-loader;可能是只写了css-loader，没有写style-loader；顺序反了，必须写成style-loader!css-loader;扩展：问: 如果没写style-loader或者没写css-loader会怎么样；答:　　没写...

webpack4 生产环境css样式丢失

u013994400的博客

04-22

3709

webpack4升级遇到的一些问题 webpack4 生产环境css样式丢失 package.json “sideEffects”: [“.css",".less”,“*.scss”], 或者设置成true vue、react配置gzip打包后，删除源文件deleteOriginalAssets: true,nginx需要的配置 CompressionWebpackPlugin 的deleteOriginalAssets nginx 配置 gzip_static on; ...

css打包丢失,vue2+webpack1.13打包时生成css内容丢失

weixin_39620099的博客

08-03

579

vue2+webpack1.13+vue-cli打包问题package.json依赖："dependencies": {"axios": "^0.15.3","vue": "^2.1.0","vue-infinite-scroll": "^2.0.0","vue-router": "^2.1.1","vuex": "^2.2.1"},"devDependencies": {"autoprefixe...

webpack 没有生成css,Webpack只生成JS，没有来自SCSS的CSS文件

weixin_29419599的博客

08-03

884

在我的项目中，我使用带有React和NodeJS的Webpack。我想生成一个bundle.js和style.css文件。目前，我有下面的代码：Webpack只生成JS，没有来自SCSS的CSS文件var webpack = require('webpack')var ExtractTextPlugin = require('extract-text-webpack-plugin')module....

解决：Webpack4 打包时css样式文件为空

洲上牧童

11-26

1553

最近项目upgrade了一下，然后打包的时候发现Css文件为空，一时不知所措，后经冷静分析，最终解决问题，这里分享给大家

vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题

10-08

772

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。如下图：后来在网上查了一下，发现可能是optimize-css-assets-webpack-plugin这个插件的问题，导致打包时这个属性和注释混在了一起（个人猜测）,其实解决办法很简单，只需要在这...