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

最新推荐文章于 2023-06-07 15:30:09 发布
最新推荐文章于 2023-06-07 15:30:09 发布
阅读量362 收藏
点赞数
分类专栏： 错误记录 文章标签： scss laravel webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41825819/article/details/100689582
版权
在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.47元/天 解锁文章
小资不采
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Webpack处理CSS文件
maxandcc的博客
07-27 446
同前几篇文章一样，首先需要在自己的项目目录下初始化自己的npm（命令：npm init），然后下载依赖的包(npm install webpack webpack-cli) 初始化完成后，创建配置文件（webpack.config.js），轻车熟路了哈 好了，让我们run以下试试： 这时候可以看到报错了，说的是您需要一个loader处理该类型文件，这时候就联想到之前说的：loader是处理非js文件的。所以我们需要下载loader的包。这里需要下载css-loader（n...
webpack4-scss-pug-es6
05-18
在实际项目中，Webpack 4 会配置各种 loader 来处理不同类型的文件，如 `style-loader` 和 `css-loader` 处理 CSS，`file-loader` 或 `url-loader` 处理静态资源，`babel-loader` 处理 JavaScript 代码。同时，通过...
webpack打包过滤console等
Vanilla1119的博客
04-03 2003
webpack打包过滤console等 开发环境下需要console打印很多的数据，但是放在放在线上想过滤掉console，debugger这些， 只要在webpack的配置里面加上一段代码就可以过滤掉。 对于webpack4以上的版本过滤console方法： 1.安装terser-webpack-plugin插件 npm i --save terser-webpack-plugin 2....
webpack配置路径快捷方式，文件引用后缀过滤
李知恩李知金
04-18 555
resolve: { alias: { "@": path.join(__dirname,"src"), // 目录快捷方式配置 }, extensions: [".js", ".ts", ".jsx", ".tsx", ".json"],//以上文件引入可以省略后缀名 }
多文件自己过滤编辑用gulp更合适 webpack使用单页面应用比较好比如vue react
weixin_43152108的博客
05-22 133
多文件自己过滤编辑用gulp更合适 webpack使用单页面应用比较好比如vue react /** * Created by 37957 on 2018/9/14. */ var gulp = require('gulp'), uglify = require("gulp-uglify"),//亚索js minifyCss = require("gulp-minify-css"),//亚索css imagemin = require('gulp-imagemin'),//亚索图片 runSequence
webpack打包文件
qq_39598092的博客
11-05 358
webpack.config.js是自己创建的打包文件 在文件的跟目录下  引用html-webpack-plugin 首先要 npm install html-webpack-plugin -S 在命令行中执行一下 let path=require('path');//引入这个文件就不会把相对路径变成绝对路径 let HtmlWebpackPlugin=require('html-web
final-ntml-css.github.io
04-04
2. **CSS文件**：编译后的SCSS文件会生成对应的CSS文件，这些文件以`.css`扩展名结尾，是浏览器可以直接理解和应用的样式表。在项目中，通常会有至少一个主CSS文件，如`style.css`，用于整合所有样式规则。 3. **...
react-OneLoader一个webpack加载器来启用单个文件的React组件
08-14
同时，它还支持在同一个文件中嵌入CSS或者其他的样式语言，例如SCSS或Less，通过CSS预处理器进行编译。 三、优点 1. 提高代码可读性和可维护性：所有组件相关的代码都在一个文件中，减少了文件之间的依赖关系，使...
PIR_redesign
03-29
例如，可能有一个`_variables.scss`文件来定义颜色、字体和其他全局变量，一个`_mixins.scss`文件包含可复用的样式混合，以及多个以`.scss`结尾的文件，每个代表一个特定的页面或组件的样式。 2. **CSS文件**：SCSS...
ntProject
03-19
SCSS 文件通常以 `.scss` 扩展名结尾，并通过编译器转换成常规的 `.css` 文件，以便浏览器能够理解并应用样式。 项目中的主文件 `ntProject-main` 没有提供具体的文件类型，但根据项目命名惯例，这可能是项目的主...
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
10-17
本文通过两种方法给大家介绍了webpack打包时排除其中一个css、js文件，或单独打包一个css、js文件的方法 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
webpack样式处理，以及js，css压缩
Sely_Lou的博客
03-19 304
1.在配置中添加module module: { //模块 rules: [ //规则 css-loader 解析@import这种语法的 //style-loader 把css插入到head标签中 //loader的特点 希望单一 //loader的用法 字符串只用一个loader //多个loader需要[] ...
webpack-externals过滤文件
u013992330的博客
12-29 8794
{ "babel-core" :"commonjs babel-core", "babel-loader" :"commonjs babel-loader", "body-parser" :"commonjs body-parser", "cookie-parser" :"commonjs cookie-parser", "debug" :"commonjs debug"
webpack处理样式资源（css less sass scss）
最新发布
jieyucx的博客
06-07 1480
本身是不能识别样式资源的，所以我们需要借助Loader来帮助解析样式资源。
scss中webpack不打包@import url()引入的scss解决方案
yanhappiness
10-19 7653
解决方案 1.先讲解决方案 将 @import url("./**.scss") ; 改为 @import "./**.css"; 原因 共同点： 首先这两种引用方式都是从其他样式表导入样式规则到当前样式表中。 不同点： @import url 是css的语法规则 @import [ < string > | < url > ] [ < media...
修改webpack使其忽略某些文件
weixin_35754676的博客
01-14 1563
可以使用 webpack 的 exclude 配置项来忽略某些文件，例如： module: { rules: [ { test:/\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: [...
深度解锁Webpack（进阶篇）
油墨香^-^的博客
09-06 1518
很多时候，我们在开发环境中会使用预发环境或者是本地的域名，生产环境中使用线上域名，我们可以在webpack定义环境变量，然后在代码中使用。使用webpack内置插件来定义环境变量。中的每个键，是一个标识符.如果value是一个字符串，会被当做code片段如果value不是一个字符串，会被stringify如果value是一个对象，正常对象定义即可如果key中有typeof，它只针对typeof调用定义DEV: JSON.stringify('dev'), //字符串。
webpack打包排除css,详解Webpack打包时排除其中一个CSS、js文件或单独打包一个CSS、js文件(两种方法)_气质_前端开发者...
weixin_39652154的博客
08-04 1127
在项目中经常会需要将一些接口的配合文件或者某些样式文件，分离出来单独打包，便于后期改动，这里我以项目目录：如上图所示，现在我需要将项目中的scBtn.方法一：1、在bulid文件夹下建一个copy.代码如下：var fs = require('fs');var path = require('path');function resolve(dir) {return path.join(__dirn...
Webpack入门之遇到的那些坑，系列示例Demo
热门推荐
大灰狼的小绵羊哥哥的博客
03-13 1万+
前言 网上关于webpack的教程已经数不胜数了，也无意再重新写一篇复制文。但是实际操作过程中，发现各种教程版本都不一致，有的教程已经过时了，有的教程模糊不清，因此还是遇到了各种问题，因此特将自身实际操作过程中遇到的问题记录下来，也希望能给他人带来帮助！https://dailc.github.io/2017/03/13/webpackfreshmanualAndBug.html?utm_s
webpack将css文件打包到css目录下
06-06
要将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、付费专栏及课程。

余额充值