- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端大白专栏
postcss-loader 有什么用?
回归正题,postcss-loader有什么用? PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。
1.7K30发布于 2018-06-15 - 来自专栏前端技术归纳
入门webpack的最佳实践（基于webpack4.X 5.X）-- postcss-loader介绍
前言 前面几篇文章介绍了一些优化打包速度和打包体积的插件，除此之外，webpack社区还有非常多功能强大的插件，而本文将介绍postcss-loader的插件配置。 目录 postcss-loader autoprefixer postcss-preset-env postcss-flexbugs-fixes postcss-normalize css module postcss-loader postcss-loader是一个处理css的loader，它提供了很多增强css的插件 基础配置 { test: /.css$/i, use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { 配置 { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ 'postcss-preset-env
1.3K10编辑于 2022-09-27 - 来自专栏乱码李
PostCSS 初识
解决方案 首先安装 webpack 插件 postcss-loader 和 autoprefixer $ npm i autoprefixer postcss-loader --save-dev 然后修改 postcss-loader! postcss-loader! less-loader' }) } 注意 postcss-loader 应该放在 less-loader 和 css-loader 之间，处理顺序为: less-loader -> postcss-loader postcss-loader' }) }] }, plugins: [ new Ex({ filename: '.
70640发布于 2021-11-26 - 来自专栏leon的专栏
webpack项目轻松混用css module
modules: true, localIdentName: '[hash:base64:6]' } }, 'postcss-loader 可以看出wepack在编译过程中，遇到.css结尾的文件，都会交由postcss-loader、css-loader和style-loader依次处理。 localIdentName: '[hash:base64:6]' } }, { loader: 'postcss-loader localIdentName: '[hash:base64:6]' } }, { loader: 'postcss-loader { sourceMap: true, importLoaders: 2 } }, { loader: "postcss-loader
1.8K30发布于 2019-08-28 - 来自专栏前端小菜鸡yym
webpack postcss
/src/css/test.css postcss-loader 我们的项目中，如果需要进行css兼容浏览器的处理，并不可能都去使用命令行去处理。因此就需要loader的处理。 安装postcss-loader，其内部又是使用了postcss的。 npm i postcss-loader -D webpack.config.js 因为是对样式文件的处理，因此需要加到css文件loader中。并且，对css的兼容是在处理css文件前就执行的。 因此顺序是'postcss-loader'在最右边。 ', // postcss-loader添加配置 options:{ // 配置中使用postcss postcssOptions
52120编辑于 2023-01-12 - 来自专栏wfaceboss
(13/24) css进阶：自动处理css3属性前缀
此次是关于如何通过postcss-loader给css3属性自动添加前缀的。 postcss-loader 用来对.css文件进行处理，并添加在 style-loader和 css-loader 之后。通过一个额外的postcss方法来返回所需要使用的PostCSS插件。 1.安装 需要安装两个包postcss-loader 和autoprefixer（自动添加前缀的插件） npm install --save-dev postcss-loader autoprefixer ', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader
1.3K40发布于 2019-04-08 - 来自专栏WflynnWeb
webpack生产、开发公共配置拆分
', // css厂商前缀 npm i postcss-loader -D 配合 autoprefixer 插件 options: { } }, { loader: 'postcss-loader ', // css厂商前缀 npm i postcss-loader -D 配合 autoprefixer 插件 options: { ', // css厂商前缀 npm i postcss-loader -D 配合 autoprefixer 插件 options: { } }, { loader: 'postcss-loader
79930编辑于 2022-10-28 - 来自专栏前端开发随记
从0到1 Webpack搭建Vue3开发、生产环境
dataUrlCondition: { maxSize: 4 * 1024 } } } ] } postcss系列 npm install postcss-loader autoprefixer -D 修改处理css相关配置 { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader', 'postcss-loader ] }, { test: /\.less$/, use: [ 'vue-style-loader', 'css-loader', 'postcss-loader rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader }, { test: /\.less$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader
1.4K30编辑于 2022-12-15 - 来自专栏前端杂货铺-Gopal
前端踩坑系列《四》
style-loader', { loader: 'css-loader', options: { // 0 个的时候没有，1个的时候使用 postcss-loader ,2个使用 postcss-loader, sass-loader importLoaders: 2, // 0 => no loaders (default); 1 = > postcss-loader; 2 => postcss-loader, sass-loader }, }, 'postcss-loader', 'sass-loader',
66510发布于 2020-09-24 - 来自专栏各类技术文章~
Webpack5里好用的插件（—）
安装： yarn add -D postcss autoprefixer // 或者 npm install postcss autoprefixer --save-dev 复制代码 接下来，我们要在postcss-loader style-loader", { loader: "css-loader" }, { loader: "postcss-loader yarn add -D postcss postcss-pxtorem // 或者 npm install postcss postcss-pxtorem --save-dev 复制代码 接下来，我们要在postcss-loader style-loader", { loader: "css-loader" }, { loader: "postcss-loader postcss postcss-px-to-viewport // 或者 npm install postcss postcss-px-to-viewport --save-dev 复制代码 接下来，我们要在postcss-loader
1.3K32发布于 2021-10-09 - 来自专栏人生代码
webpack打包原理入门探究（六）less|sass-loader初探
postcss-loader' }, { test: /\.scss$/, loader: postcss-loader! postcss-loader!
1.1K20发布于 2020-06-11 - 来自专栏人生代码
webpack打包原理入门探究（七）其他文件处理
postcss-loader' }, { test: /\.scss$/, loader: postcss-loader! postcss-loader!less-loader' }, { test: /\.
66340发布于 2020-06-11 - 来自专栏人生代码
webpack打包原理入门探究（五）css-loader初探
需要安装 postcss-loader 处理浏览器样式前缀 ? 需要安装 autoprefixer 插件 ? postcss-loader' }, { test: /\.s[c|a]ss$/, loader "html-loader": "^0.5.5", "html-webpack-plugin": "^3.2.0", "node-sass": "^4.13.0", "postcss-loader 我们会发现我们希望处理的浏览器前缀竟然没有生效，其实 css-loader 有一个参数是 importLoaders=1,表示处理后续的 loader 当我们的样式存在 @import 其他样式的时候，需要 postcss-loader
73330发布于 2020-06-11 - 来自专栏前端开发面试指南
2022-webpack5实战教程
} ] } } 打包之后在浏览器中打开html文件，就能看见我们注入的css 图片 为css添加浏览器前缀 为了适配更多的浏览器样式我们需要给css加上前缀 我们需要postcss-loader module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader // 从右向左开始解析 }, { test: /\.scss$/, use: ["style-loader", "css-loader", "postcss-loader [ { test: /\.css$/, use: ["style-loader", "css-loader", { loader: "postcss-loader , { test: /\.scss$/, use: ["style-loader", "css-loader", { loader: "postcss-loader
1.2K30编辑于 2022-10-17 - 来自专栏前端LeBron
Webpack Loader知识分享
CSS样式的转换和适配，比如自动添加浏览器前缀、css样式的充值； 但是实现这些功能，我们需要借助于PostCSS插件 如何使用PostCSS 查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader /src/css/user.css Webpack配置文件使用PostCSS 安装postcss-loader和autoprefixer npm install postcss-loader autoprefixer --save 编写配置文件 css-loader处理前先用postcss-loader处理 在options的postcssOptions中，配置plugins，使用autoprefixer { : "css-loader", // 对应的loader options: {}, }, { loader: "postcss-loader , ], }, { test: /\.less$/, use: ["style-loader", "css-loader", "postcss-loader
71130编辑于 2021-12-08 - 来自专栏生如夏花绚烂
从零开始搭建Vue工程
{ return ( ) } } css自动加浏览器前缀 npm i postcss-loader ('autoprefixer') module.exports = { plugins:[ autoprefixer() ] } 接下来修改相应配置，在css-loader处理前先交给postcss-loader test:/\.styl$/, use:[ 'style-loader', 'css-loader', { loader:'postcss-loader sourceMap:true } },//添加postcss处理 /**因为stylus-loader会自动生成sourceMap所以postcss-loader style-loader', 'css-loader', { loader:'postcss-loader
1.1K10编辑于 2022-09-08 - 来自专栏Rovo89
使用Webpack快速配置编写HTML基础环境
extract-text-webpack-plugin": "^4.0.0-beta.0", "html-loader": "^0.5.5", "node-sass": "^4.8.3", "postcss-loader { loader: 'css-loader' }, { loader: 'postcss-loader -restructure' }, { loader: 'postcss-loader', options
1.1K40发布于 2018-06-19 - 来自专栏js笔记
webpack工程化
般都是通过插件来处理css，并不会直接处理 ⽐如： ⾃动补⻬浏览器前缀: autoprefixer css压缩等 cssnano npm install postcss -D npm install postcss-loader "> 1%"], }), ], }; # 或者创建.browserslistrc⽂件 > 1% last 2 versions not ie <= 8 webpack.config.js中配置,postcss-loader 在css-loader前面 { test: /\.less$/, use: ['style-loader', 'css-loader','postcss-loader } }, 'css-loader', 'postcss-loader
53720编辑于 2022-10-25 - 来自专栏Web技术学苑
webpack构建自定义vue应用
css-loader', { loader: 'less-loader' }, { loader: 'postcss-loader 有很多可配置的参数，更多参考可以查看官网webpack-postcss[3]，也可以查看更详细api文档github-postcss[4]实现更多的功能 npm install --save-dev postcss-loader postcss postcss-preset-env 我们在loader上加上postcss-loader module.exports = { module: { rules: [ webpack.docschina.org/loaders/less-loader/ [3] webpack-postcss: https://webpack.docschina.org/loaders/postcss-loader / [4] github-postcss: https://github.com/webpack-contrib/postcss-loader [5] browserslist: https://www.npmjs.com
69220编辑于 2022-07-28 - 来自专栏逸鹏说道
还在手动给css加前缀？no！几种自动处理css前缀的方法简介
/dist/postcss')); }); webpack 在webpack中，你可以安装npm包postcss-loader来启用Autoprefixer。 postcss-loader" } ] }, postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ] } postcss-loader! , postcss: [ autoprefixer({ browsers: ['last 2 versions'] }) ] } 首先我们先用less-loader编译less为css，然后在通过postcss-loader
3K50发布于 2018-04-10
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号