webpack 打包scss结尾的文件,过滤css的一些属性

在laravel项目中,使用webpack打包scss文件时,发现某些css属性(如:`)会被过滤。为了解决这个问题,可以在scss源码中对这些属性进行注释,避免它们在打包过程中被压缩,从而确保打包后的文件保留这些属性。
摘要由CSDN通过智能技术生成

webpack 打包scss结尾的文件,过滤css的一些属性

  • 在laravel框架中,使用scss文件编写css的时候,利用css的属性控制字体的样式属性,有时候会打包失败,也不是打包失败,是打包成功,但是它会过滤掉一些
    css属性,比如:
.add {
   
    -webkit-box-orient: vertical;
    display:-webkit-box;
}

这个属性,在打包的时候就会过滤掉,scss文件有,但是打包之后的文件就没有这个属性了,在这个时候,一个比较简单的解决的办法就是在scss文件中,对不被打包
的属性添加注释,如下面这样:

.add {
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将CSS文件打包css目录下,可以在webpack配置文件中进行如下配置: ```javascript const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { // ...其他配置 module: { rules: [ { test: /\.css$/, use: [ { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' // 解决css中引入的图片路径不正确的问题 } }, 'css-loader' ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].[chunkhash].css' }) ] } ``` 其中,module.rules配置用于指定如何处理各种类型的文件,plugins配置用于指定插件。这里使用了MiniCssExtractPlugin(需要先安装),它的作用是将CSS文件单独打包到指定的目录下,而不是将CSS代码打包到JS文件中。 在module.rules中配置了针对CSS文件的处理规则,其中使用了css-loader和MiniCssExtractPlugin.loader。css-loader用于解析CSS文件中的@import和url()等语法,并将其转换为Webpack可以理解的语法。MiniCssExtractPlugin.loader用于将CSS代码从JS文件中提取出来并打包到指定目录下,同时也可以处理CSS中引入的图片路径不正确的问题。 在plugins中配置了MiniCssExtractPlugin插件,用于指定打包生成的CSS文件输出目录和文件名。这里将打包生成的所有CSS文件都放在了css目录下,文件名格式为css/[name].[chunkhash].css,其中name表示文件名,chunkhash表示文件的hash值。这样每次打包生成的文件名都不同,有助于缓存更新。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值