0
点赞
收藏
分享

微信扫一扫

webpack基础(八)——PostCss

深夜瞎琢磨 2022-01-31 阅读 70

一、什么是PostCss
PostCss就是通过js代码来第css进行转换,比如给css加上浏览器前缀。当然这些工作也是需要一些插件来一起完成的。
二、在命令行执行postcss

1、首先安装postcss postcss-cli,
npm install postcss postcss-cli -D

2、安装所需要的依赖(autoprefixer是填充浏览器前缀的)
npm install autoprefixer -D

3、执行命令
npx postcss --use autoprefixer -o end.css test.css

在这里插入图片描述
在这里插入图片描述
三、在开发环境中使用postcss
我们不能一直在命令行环境中使用postcss,我们也可以在webpack中使用postcss,此时需要安装postcss-loader,postcss-loader是依赖于postcss的。npm install postcss-loader -D

在webpack.config.js中配置
{
        test:/\.css$/,
        use:{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:[
                require("autoprefixer")
              ]
            }
          },
        }
      }

在这里插入图片描述
也可以在外部的postcss.config.js的文件中进行配置。

module.exports = {
	plugins:[
		require("autoprefixer")
	]
}

postcss-preset-env也是postcss的一个插件,类似于babel的预设。postcss-preset-env中存在着一些插件、帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境
添加所需的polyfill,同时也可以自动帮助我们添加autoprefixer

module.exports = {
  plugins:[
    require("postcss-preset-env")
  ]
}
举报

相关推荐

0 条评论