0
点赞
收藏
分享

微信扫一扫

postcss

40dba2f2a596 2022-07-13 阅读 95

1.使用Can I Use中的值为CSS规则添加供应商前缀。​​Autoprefixer​​将使用基于当前浏览器流行度和属性支持的数据为您应用前缀。

2.​​PostCSS Preset Env​​​允许您将现代CSS转换为大多数浏览器可以理解的内容,使用​​cssdb​​​根据目标浏览器或运行时环境确定所需的​​polyfill​​。

3.​​CSS模块​​意味着你永远不必担心你的名字过于通用,只需使用最有意义的东西。

4.使用​​stylelint​​​(现代CSS ​​linter)实现​​一致的约定并避免样式表中的错误。它支持最新的CSS语法,以及类似CSS的语法,例如SCSS。

Webpack

Use ​​postcss-loader​​​ in ​​webpack.config.js​​:

module.exports = {
module: {
rules: [
{
test:/\.css$/,
exclude:/node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
]
}
]
}
}

Then create ​​postcss.config.js​​:

module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}

JS API

For other environments, you can use the JS API:

const autoprefixer = require('autoprefixer')
const postcss = require('postcss')
const precss = require('precss')
const fs = require('fs')

fs.readFile('src/app.css', (err, css) => {
postcss([precss, autoprefixer])
.process(css, { from: 'src/app.css', to: 'dest/app.css' })
.then(result => {
fs.writeFile('dest/app.css', result.css, () => true)
if ( result.map ) {
fs.writeFile('dest/app.css.map', result.map, () => true)
}
})
})

 



举报

相关推荐

0 条评论