webpack postcss
postcss
postcss是什么?有什么用?
JavaScript转换样式的工具。让css样式适配不同的浏览器(不用自己去手动的添加了)。
安装postcss
npm i postcss-cli -D
autoprefixer
如下,它将左侧的css进行了多个浏览器版本的兼容。
postcss使用命令行
新建一个test.css文件,然后在login.js中引用。
把官网的如下代码复制到test.css
.example {
display: grid;
transition: all .5s;
user-select: none;
background: linear-gradient(to bottom, white, black);
}
新进行一下npm run build
编译,然后审查元素发现,我们的test.css的样式加入进来了。但是并没有针对浏览器来进行样式的兼容。比如transition
就没有添加前缀为-webkit-transition
然后我们尝试着用postcss进行处理
-o也就是output 然后我们要输出成的文件 操作的文件
npx postcss -o ret.css ./src/css/test.css
确实是生成了一个新的文件,但是并没有添加前缀。其实postcss是一个独立的工具,本身什么也不能做。他还需要其他插件。
autoprefixer的使用
首先,不要忘了我们的.browserslistrc
。这里是对需要兼容的浏览器版本的一个约束。autoprefixer的编译那,也会根据.browserslistrc
来进行编译的。
安装:
npm i autoprefixer -D
然后使用autoprefixer再次执行postcss,此时可以发现都加上了适配不同浏览器的前缀了。
npx postcss --use autoprefixer -o ret.css ./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'在最右边。
module: {
rules: [
{
// 是一个正则表达式
test: /\.css$/,
// 可能有多个loader 执行顺序从右往左
use: ['style-loader','css-loader','postcss-loader'],
},
{
test: /\.less$/,
use:['style-loader','css-loader','less-loader']
}
],
},
比如要添加前缀,那么postcss本身是不能处理的,需要对其进行一些配置。上面的写法就需要改变。
module: {
rules: [
{
// 是一个正则表达式
test: /\.css$/,
// 可能有多个loader 执行顺序从右往左
use: ['style-loader','css-loader',
{
loader:'postcss-loader',
// postcss-loader添加配置
options:{
// 配置中使用postcss
postcssOptions:{
// postcss配置中使用插件
plugins:[
// 使用了autoprefixer插件,进行css前缀的处理
require('autoprefixer')
]
}
}
}],
},
{
test: /\.less$/,
use:['style-loader','css-loader','less-loader']
}
],
},
然后此时再执行 npm run build
,可以看到css针对不同浏览器的前缀都添加了。
相关文章
- Jgit的使用笔记
- 利用Github Action实现Tornadofx/JavaFx打包
- 叹息!GitHub Trending 即将成为历史!
- 微软软了?开源社区讨论炸锅,GitHub CEO 亲自来答
- GitHub Trending 列表频现重复项,前后端都没去重?
- Photoshop Elements 2021版本软件安装教程(mac+windows全版本都有)
- (ps全版本)Photoshop 2020的安装与破解教程(mac+windows全版本都有)
- (ps全版本)Photoshop cc2018的安装与破解教程(mac+windows全版本,包括2023
- 环境搭建:Oracle GoldenGate 大数据迁移到 Redshift/Flat file/Flume/Kafka测试流程
- 每个开发人员都要掌握的:最小 Linux 基础课
- 来撸羊毛了!Windows 环境下 Hexo 博客搭建,并部署到 GitHub Pages
- 超实用!手把手入门 MongoDB:这些坑点请一定远离
- 【GitHub日报】22-10-09 zustand、neovim、webtorrent、express 等4款App今日上新
- 【GitHub日报】22-10-10 brew、minio、vite、seaweedfs、dbeaver 等8款App今日上新
- 【GitHub日报】22-10-11 cobra、grafana、vue、ToolJet、redwood 等13款App今日上新
- Photoshop 2018 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2017 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2020 下载及安装教程(mac+windows全版本都有,包括最新的2023)
- Photoshop 2023 资源免费下载(mac+windows全版本都有,包括最新的2023)
- 最新版本Photoshop CC2018软件安装教程(mac+windows全版本都有,包括2023