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

最新推荐文章于 2022-07-01 13:53:38 发布
最新推荐文章于 2022-07-01 13:53:38 发布
阅读量4.4k 收藏 5
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/windmilljan/article/details/109195393
版权

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

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

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

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

"sideEffects": [
  "*.css"
  //假如还有其他不想要摇树要走的，就在这里继续添加吧
]
QQmm~~
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
antd+typescript webpack打包后样式丢失
广兰路地铁的博客
05-02 3731
问题描述 最近笔者最近正在将老的项目迁移至typeseript,项目跑起来之后发现antd相关的样式全部丢失，发现webpack打包后css相关的代码没有被提取出来，导致antd的样式全部无效化，原先的webpack配置文件： module: { rules: [ { test: /\.(js|jsx)$/, ...
css打包丢失,webpack打包build时css样式-webkit-box-orient丢失问题的解决方案
weixin_39864373的博客
08-03 1205
最近遇到一个奇怪的问题，在设置超出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 1087
在使用不同环境对项目打包之后，发现生产环境的css文件没有全部被挂载，缺失了一部分，但是测试环境的是正常的。就是图里面的这几个文件，打包生产环境以后缺失了。在一番搜索之后，发现有个概念叫做tree shaking。就是说生产环境（production）在打包的时候，会默认把一些dead code，也就是代码中看起来没有引用到，没有用上的代码，自动过滤掉。那么取消过滤不就好了？或者能不能够把这个tree shaking的功能关掉呢？又搜索了一番，发现大家都是建议说在package.json里面， 调整“sid
webpack4 生产环境css样式丢失
u013994400的博客
04-22 3571
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 398
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不起作用
weixin_34293911的博客
04-17 899
问题: webpack 打包成功，但是css不起作用问题分析/解决: 原因有以下几种使用了webpack2的语法规则不正确; webpack2要求必须写-loader;可能是只写了css-loader，没有写style-loader；顺序反了，必须写成style-loader!css-loader;扩展：问: 如果没写style-loader或者没写css-loader会怎么样；答:　　没写...
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法正常显示图标。 在描述的问题中，我们看到打包后的字体文件位于`static/fonts`...
webpack-oss-plugin:webpack插件 将打包后的文件上传到OSS
05-25
该 Webpack 插件用于在本地打包完成后，将打包后的文件上传至 阿里云 OSS，并提供上传完成的回调 使用 安装 webpack-oss-upload-plugin npm install webpack-oss-upload-plugin -D 在 webpack config 中使用 const ...
Webpack打包css后z-index被重新计算的解决方法
08-30
总的来说，解决 Webpack 打包 CSS 后 z-index 重计算的问题需要理解 CSS 的堆叠上下文和 webpack 的打包机制，通过调整配置和优化代码组织，可以有效地防止这类问题的发生。同时，保持代码的整洁和模块化，以及对...
完美解决webpack打包css背景图片路径问题
11-20
在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 ...打包后在dist目录的发现没有css文件。这是因为css
gulp-postcss：webpack-postcss
02-16
Webpack是一个模块打包器，主要处理JavaScript，但它也能通过各种加载器（如style-loader和css-loader）处理CSS和其他样式资源。PostCSS则是一个CSS处理器，允许开发者使用未来CSS语法，并转换为当前浏览器可识别的...
webpack 没有生成css,Webpack只生成JS，没有来自SCSS的CSS文件
weixin_29419599的博客
08-03 726
在我的项目中，我使用带有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 1319
最近项目upgrade了一下，然后打包的时候发现Css文件为空，一时不知所措，后经冷静分析，最终解决问题，这里分享给大家
webpack打包后部分css样式丢失问题
G-shitou的博客
08-30 3643
最近在打包Vue项目之后，发现css中有部分代码消失了，查阅网上类似的问题，依次试了试，终于解决了。 首先尝试注释掉 webpack.prod.conf.js 中下面的代码，发现有一部分代码生效了，但是还是有css代码打包后丢失。 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ...
react打包后图片丢失_从零配置webpack 4+react脚手架（四）
weixin_39628498的博客
11-19 550
从零配置webpack 4+react脚手架（四）前言经过前三节的学习，我们已经大概能自己配出一个react脚手架了，但是仍有许多配置未完成，比如图片，字体图标的配置，Source Map的配置等，通过前面的学习，我相信你已经能够做到这些简单的配置了，实在还不是很清楚，那我们就往下看吧！添加图片的loaderfile-loader 可以对图片文件进行打包，但是 url-loader 可以实现 fi...
webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件
weixin_30389003的博客
10-25 1090
在项目中经常会需要将一些接口的配合文件或者某些样式文件，分离出来单独打包，便于后期改动，这里我以css文件为例，介绍实现两种方法： 项目目录： 如上图所示，现在我需要将项目中的scBtn.css文件单独打包出来。在不做任何配置，直接打包出来的css文件是压缩合并成了一个了，如下图，当我想要改某一个css文件时就不行了。 方法一： 1、在bulid文件夹下建一个copy.js（这个js名称可以自...
vue打包之后css找不到,详谈vue+webpack解决css引用图片打包后找不到资源文件的问题...
weixin_39605191的博客
08-04 581
使用vue打包，通过css引用图片资源。.img {height: 500px;width: 100%;background: url("./assets/img/1.jpg") no-repeat;background-size: 100%;}热更新开发环境的效果是这样但打完包出来的页面却报找不到资源的错误。查了一下原因，css引入图片再打包后，style-loader无法设置自己的public...
webpack4---生产环境css样式丢失问题
学渣蓝鲸的博客
02-21 6860
相信有很多人跟我一样看webpack4官方文档进行学习配置，但是在配置的过程中遇到一个非常奇怪的问题——“明明开发环境显示的好好地样式，在生产环境就不生效了”。 项目目录 //webpack.prod.js plugins:[ new HtmlWebpackPlugin({ title:'production CSS分离', ...
webpack样式失效，打包生产环境，开启cssModule
weixin_30980795的博客
09-16 1139
webpack打包生产环境样式失效： 生产环境中，webapck把我的样式文件删掉了，原因在于tree-share 补补知识 tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。 新的 webpack 4 正式版本，扩展了这个检测能力，通过 package.json 的 “sideEffects” 属性作为标记，向 compiler 提供提示，表明项目
用webpack打包却提示zsh: command not found: webpack
最新发布
10-08
在使用webpack打包时，出现"zsh: command not found: webpack"的提示是因为系统无法找到webpack的命令。这通常是因为webpack没有全局安装或者没有正确设置环境变量导致的。 解决这个问题的方法有两种： 方法一：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值