- 综合排序
- 最热优先
- 最新优先
- 来自专栏Web前端
PostCSS概述
插件如Autoprefixer、cssnano、PreCSS等，分别负责添加浏览器前缀、压缩CSS、支持Sass/Less-like语法等功能。 // postcss.config.jsmodule.exports = { plugins: [ 'autoprefixer', ['cssnano', { preset: 'default src/style.css --use autoprefixer cssnano precss -o dist/style.cssNode.js API在Node.js项目中直接调用PostCSS API = require('cssnano');const precss = require('precss');postcss([autoprefixer, cssnano, precss]) .process = require('cssnano');const precss = require('precss');function processCSS() { return gulp.src('src/
62300编辑于 2024-11-24 - 来自专栏smy
webpack的css压缩不兼容IOS8问题探索
webpack使用postcss的autoprefixer插件，并在压缩css时使用了cssnano，处理不当的情况下会导致压缩css后，部分兼容前缀（比如-webkit-）被删除的问题。 进行压缩，而cssnano会使用到autoprefixer进行无关前缀的清理。 上面有提到，cssnano会使用autoprefixer自动清除掉一些他认为不重要的前缀。而OptimizeCssAssetsPlugin中默认了是使用cssnano。 所以我们主动关闭cssnano的autoprefixer功能即可，因为我们已经在postcss中使用了autoprefixer插件，这里无需重复使用。 的大小 //cssnano 集成了autoprefixer的功能。
1.6K40发布于 2018-06-14 - 来自专栏有趣的django
Django打造大型企业官网（二） 三、项目环境搭建
"^2.26.7", "gulp": "^4.0.2", "gulp-cache": "^1.1.2", "gulp-concat": "^2.6.1", "gulp-cssnano "^2.26.7", "gulp": "^4.0.2", "gulp-cache": "^1.1.2", "gulp-concat": "^2.6.1", "gulp-cssnano 3.2.编写gulpfile.js文件 gulp.js var gulp = require("gulp"); var cssnano = require("gulp-cssnano"); var rename /src/css/*.scss") .pipe(sass().on("error",sass.logError)) .pipe(cssnano()) //压缩 .pipe(rename *",gulp.series('images')); }); var gulp = require("gulp"); var cssnano = require("gulp-cssnano"); var
1.5K30发布于 2019-06-14 - 来自专栏乱码李
解决 webpack 打包后 z-index 重新计算的问题
important 后依然无效，查资料发现是 OptimizeCssAssetsPlugin 调用 cssProcessor cssnano 对 z-index 进行了重新计算导致的。 解决方案 解决方案按照网上的资料，可以在 OptimizeCssAssetsPlugin 插件中关掉 cssnano 对 z-index 的重新计算（cssnano 称为 rebase）。 : {removeAll: true}, // 避免 cssnano 重新计算 z-index safe: true }, canPrint: false }) cssnano 将 z-index rebase 归类为 unsafe，只有在单个网页的 css 全部写入一个 css 文件，并且不通过 JavaScript 进行改动时是 safe。 参考： http://cssnano.co/optimisations/zindex/ cssnano 默认进行 z-index rebase。
84220发布于 2021-11-26 - 来自专栏有趣的django
Django打造大型企业官网（一） 一、nvm的安装二、gulp的安装和用法
= require("gulp"); var cssnano = require("gulp-cssnano") gulp.task("greet",done => { console.log /css/*.css") .pipe(cssnano()) .pipe(gulp.dest(". /css/*.css") .pipe(cssnano()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest(". /css/*.css") .pipe(cssnano()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest(". /css/*.css") .pipe(cssnano()) .pipe(rename({"suffix":".min"})) .pipe(gulp.dest(".
1.2K40发布于 2019-06-14 - 来自专栏毛利学Python
前端开发使用工具 gulp
压缩css npm install gulp-cssnano --save -dev 在本地项目安装gulp-cssnano 新建一个css文件夹，在新建index.css *{ margin var cssnano = require('gulp-cssnano'); // 定义一个处理css文件改动的任务 gulp.task('css',function(){ gulp.src /css/*.css') .pipe(cssnano()) .pipe(gulp.dest(". var cssnano = require('gulp-cssnano'); var rename = require('gulp-rename') // 定义一个处理css文件改动的任务 gulp.task /css/*.css') .pipe(cssnano()) // 将index.css生成index.min.css .pipe(rename({"suffix":".min"
1.6K10发布于 2019-09-03 - 来自专栏初代庄主
Vue.js 引入 less
peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6 npm ERR! node_modules/@intervolga/optimize-cssnano-plugin npm ERR! @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.15 npm ERR!
5.7K10编辑于 2022-03-30 - 来自专栏HUC思梦的java专栏
node和gulp实现前端工程自动化(附：gulp常用插件)
/ 在gulpfile中先载入gulp包，因为这个包提供了一些API var gulp = require('gulp'); var less = require('gulp-less'); var cssnano = require('gulp-cssnano'); // 1. src/styles/_*.less']) .pipe(less()) .pipe(cssnano()) .pipe(gulp.dest('dist/styles')) html']); }); 附录： gulp常用插件： gulp-less：编译less gulp-concat：合并代码 gulp-uglify：压缩js文件 gulp-rename：重命名文件 gulp-cssnano
69110发布于 2020-09-03 - 来自专栏大前端（横向跨端 & 纵向全栈）
Webpack中压缩代码文件
1.安装插件 npm i optimize-css-assets-webpack-plugin cssnano -D 由于optimize-css-assets-webpack-plugin插件配置时依赖 cssnano预处理器，所以需要一起安装。 MiniCssExtractPlugin = require('mini-css-extract-plugin'); // npm i optimize-css-assets-webpack-plugin cssnano OptimizeCSSAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano OptimizeCSSAssetsPlugin({ assetNameRegExp: /\.css$/g, cssProcessor: require('cssnano
2.2K41编辑于 2023-01-05 - 来自专栏js笔记
webpack优化
[name]-[contenthash:6].css", }), new OptimizeCSSAssetsPlugin({ cssProcessor: require("cssnano "), // 这里制定了引擎，不指定默认也是 cssnano }), new PurifyCSS({ paths: glob.sync([ // 要做 CSS require("autoprefixer")({ overrideBrowserslist: ["last 2 versions", ">1%"], }), // require("cssnano
36610编辑于 2022-10-25 - 来自专栏游戏开发之旅
gulp的使用
gulp-concat": "^2.6.1", "gulp-concat-folders": "^1.3.1", "gulp-connect": "^5.5.0", "gulp-cssnano 2.24.4 -g npm install browser-sync@2.24.4 --save-dev gulp监听任务 依赖包引用 var gulp=require('gulp'); var cssnano =require('gulp-cssnano'); var rename=require('gulp-rename'); var uglify=require('gulp-uglify'); var concat gulp.task('css',function(){ gulp.src(paths.css+"*.scss") .pipe(sass().on('error',sass.logError)) .pipe(cssnano
1.6K20发布于 2020-08-14 - 来自专栏热爱IT
vue cli 3.0快速创建项目【内容仅供参考】
都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。 cssnano cssnano主要用来压缩和清理CSS代码。在Webpack中，cssnano和css-loader捆绑在一起，所以不需要自己加载它。 不过你也可以使用postcss-loader显式的使用cssnano。有关于cssnano的详细文档，可以点击这里获取。 在cssnano的配置中，使用了preset: "advanced"，所以我们需要另外安装： npm i cssnano-preset-advanced --save-dev 1 cssnano 集成了一些其他的PostCSS插件，如果你想禁用cssnano中的某个插件的时候，可以像下面这样操作： "cssnano": { autoprefixer: false, "postcss-zindex
1.2K30发布于 2019-04-10 - 来自专栏技术综合
vue3+webpack项目搭建实验
style-loader css-loader sass-loader sass fibers vue-loader @vue/compiler-sfc postcss-loader autoprefixer cssnano sass, fibers CSS加载(此处使用sass预处理) vue-loader, @vue/compiler-sfc Vue加载 postcss-loader, autoprefixer, cssnano postcss加载 配置postcss 在 postcss.config.js中配置 autoprefixer用于给css加前缀, cssnano用于压缩优化css module.exports = { plugins: [ require('autoprefixer'), require('cssnano')({ preset: 'default' })
2.9K20发布于 2020-08-25 - 来自专栏前端小叙
webpack多页面配置
*map)/g, //注意不要写成 /\.css$/g cssProcessor: require('cssnano'), cssProcessorOptions : { discardComments: {removeAll: true}, // 避免 cssnano 重新计算 z-index safe: true, // cssnano 集成了autoprefixer的功能 // 会使用到autoprefixer进行无关前缀的清理
1.3K30发布于 2019-08-20 - 来自专栏大前端开发
如何为你的微信小程序瘦身？
这对减少代码尺寸和代码性能都是有好处的：） 使用工具压缩优化代码 在当今HTML5等Web前端项目的开发和发布中，我们通常会通过使用一些前端工程化工具来处理我们的代码，比如使用Gulp，结合一些功能插件，如：uglify, cssnano 对JS代码进行语法优化和文本压缩 WXML文件 使用htmlmin，可以对WXML文件中多余的空格，注释等进行清理 WXSS文件 可以使用LESS提供的特性，对小程序中的全局WXSS进行合并；使用cssnano babel-preset-latest": "^6.16.0", "del": "^2.2.2", "gulp": "^3.9.1", "gulp-babel": "^6.1.2", "gulp-cssnano autoprefixer([ 'iOS >= 8', 'Android >= 4.1' ]) ])) .pipe($.if(prod, $.cssnano
95850发布于 2018-08-21 - 来自专栏前端小叙
webpack 4 配置备忘
*map)/g, //注意不要写成 /\.css$/g cssProcessor: require('cssnano'), cssProcessorOptions : { discardComments: {removeAll: true}, // 避免 cssnano 重新计算 z-index safe: true, // cssnano 集成了autoprefixer的功能 // 会使用到autoprefixer进行无关前缀的清理
41730编辑于 2021-12-16 - 来自专栏JavaScript高阶应用
从零开始构建你的 Gulp
postcss-vmin 使用 vm 为 vmin 做降级处理，IE9+ pixrem 给 rem 添加 px 作为降级处理，IE8+ postcss-import 使用 @import 合并样式表 cssnano = require('cssnano'), fontMagician = require('postcss-font-magician'), config , pseudoelements, vmin, pixrem, atImport, mqpacker, cssnano = require('cssnano'), config = require('../.. /config').sass; gulp.task('sass',() => { const processors = [ autoprefixer, cssnano
1.7K40编辑于 2024-03-19 - 来自专栏小鑫同学编程历险记
上手体验TailwindCSS
.html文件中使用@apply仍提示未知规则，建议在已安装以上插件后再添加工作区配置禁止掉这个提示： { "css.lint.unknownAtRules": "ignore" } 安装 cssnano 压缩 css： yarn add -D cssnano 配置插件： module.exports = { plugins: { // 其他插件 // cssnano 按需加到插件列表末尾 { cssnano: {} } : {}) }, } 浏览器支持状况： 在Chrome、Firefox、Edge 和 Safari 的最新稳定版本适配良好，但由于部分API不支持IE全部版本，所以强烈不建议在
2.9K20编辑于 2022-12-26 - 来自专栏进击的君君的前端之路
npm、npm scripts
//安装插件 npm install gulp-imagemin --save-dev //图片压缩 npm install gulp-cssnano --save-dev //css压缩 npm install 文件合并 npm install gulp-rename --save-dev //重命名 //gulpfile.js //引入插件 var gulp = require('gulp'), cssnano = require('gulp-cssnano'), concat = require('gulp-concat'), jshint = require('gulp-jshint'), pipe(concat('merge.css')) .pipe(rename({ suffix: '.min' })) .pipe(cssnano
2.7K41发布于 2018-06-28 - 来自专栏Web 技术
2022年开发者都在用的 Webpack 插件，你用上了吗
OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require('cssnano OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require('cssnano OptimizeCssAssetsPlugin({ assetNameRegExp: /\.optimize\.css$/g, cssProcessor: require("cssnano
70121编辑于 2022-07-29
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号