什么是PostCss？在Webpack中如何使用？

AcWrong
652 阅读2分钟

什么是PostCss？在Webpack中如何使用？

PostCSS是一种使用JavaScript插件来转换CSS的工具。它由Andrey Sitnik在2013年创建，已成为自动化CSS处理和优化的流行选择。

PostCSS采用基于插件的架构，意味着每个转换或优化都由单独的插件执行。这种模块化的设计使得可以轻松定制CSS处理管道以适应特定的需求。

一些流行的PostCSS插件包括：

  • Autoprefixer：将供应商前缀添加到CSS规则中，以确保跨浏览器兼容性。
  • CSS Nano：最小化CSS以减少文件大小并提高页面加载速度。
  • Stylelint：强制执行一致的CSS格式和识别潜在的错误或违规。
  • PostCSS Preset Env：通过自动应用必要的polyfill和转换，使得可以在今天使用未来的CSS功能。（其包括了其它一些插件的功能，如Autoprefixer）

PostCSS可以集成到各种构建工具和工作流程中，例如webpack，Gulp，Parcel等等。

我们通过在webpack中使用PostCss来加深一下理解：

Demo目录结构：

index.js

 import './style.css'
 let div = document.createElement('div')
 div.textContent = 'This is postcss'
 div.className = 'div'
 document.body.appendChild(div)

style.css

 .div {
     color: red;
     user-select: none;
     transform: translate(30px, 20px)
 }

index.html

 <!DOCTYPE html>
 <html lang="en">
 ​
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PostCss</title>
 </head>
 ​
 <body>
     <script src="./dist/bundle.js"></script>
 ​
 </body>
 </html>

1、安装所需的包

首先，你需要安装 postcss-loader 和 autoprefixer 两个包（其中postcss-loader是webpack转换CSS所需的loader，而autoprefixer是一种插件）。你可以使用npm或者yarn进行安装：

 npm install postcss-loader autoprefixer --save-dev

或者

 yarn add postcss-loader autoprefixer --dev

2、配置webpack

接下来，你需要在webpack的配置文件中进行配置。假设你的配置文件名为 webpack.config.js，你需要在这个文件中添加一个 module 属性，然后在其中定义一个 rules 属性，该属性将包含你的PostCSS规则。

webpack.config.js

 const path = require('path')
 module.exports = {
     entry: './src/index.js',
     output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist')
     },
     module: {
         rules: [{
             test: /.css$/,
             use: ['style-loader', 'css-loader', 'postcss-loader']
         }]
     }
 }

在这个例子中，我们使用了 style-loader 和 css-loader 来加载CSS文件，并使用 postcss-loader 对其进行处理。

3、配置postcss

你还需要在项目的根目录下创建一个 postcss.config.js 文件，并在其中定义你的PostCSS插件。

postcss.config.js

 module.exports = {
   plugins: [
     'autoprefixer'
   ]
 }

在这个例子中，我们只使用了 autoprefixer 插件，但是你可以添加任意数量的插件。

现在，当你使用Webpack构建你的应用程序时，所有的CSS文件都将通过PostCSS进行处理，并自动添加浏览器前缀。

运行项目后，项目目录如下：

打开index.html，会显示出This is postcss的红色字体。

与style.css文件相比，标签中的CSS已经被添加上浏览器前缀：

avatar
文章
阅读
粉丝