postcss&postcss-cli 教程

介绍

PostCSS 是一个用 JavaScript 工具和插件转换样式的工具。PostCSS 由一个核心架构支持一系列插件，这些插件可以实现 Sass、Less 来进行样式的转换，也可以将 CSS 语法转换成更简洁的形式，以满足今天流行的样式表编写方式。

PostCSS-CLI 是 PostCSS 的命令行界面，可以方便的按照配置文件的指令，对 CSS 或者 SCSS 文件进行编译，输出编译后的CSS文件。

安装

安装postcss

 npm install -g postcss

安装postcss-cli

npm install -g postcss-cli

使用

创建postcss配置文件

首先，在项目目录下创建一个名为postcss.config.js文件，postcss.config.js会被用来指定PostCSS配置。

module.exports = { 
  plugins:{ 
    // 这里可以写配置 
  }
};

安装插件

安装postcss插件：

npm install postcss-scss

配置插件

在postcss.config.js文件配置插件：

module.exports = { 
  plugins:{ 
    require('postcss-scss')
  }
};

编译

postcss styles.scss --output dist/styles.css

将styles.scss文件编译输出到dist目录下的styles.css文件。

在webpack使用 PostCSS 和 PostCSS-CLI

PostCSS是一个被广泛广泛用于前端项目的预处理工具，它可以帮助您在构建前端项目时自动完成某些常见任务。PostCSS-CLI 可以用于 webpack 项目，以提供更好的 CSS 处理。

一步一步使用PostCSS和PostCSS-CLI

安装依赖

首先，你需要安装PostCSS 和 PostCSS-CLI的依赖. 需要安装：

 npm install --save-dev postcss postcss-cli

配置 PostCSS

接下来将PostCSS配置到webpack中。在webpack.config.js中加入以下代码：

 module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              // 把PostCSS插件加进来
            ]
          }
        }
      ]
    }
  ]
}

接下来，安装你想要使用的PostCSS插件。

例如安装一些最常用的插件：

npm install --save-dev autoprefixer cssnano postcss-preset-env

然后将这些插件添加到webpack.config.js：

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {
          loader: 'postcss-loader',
          options: {
            ident: 'postcss',
            plugins: [
              autoprefixer(),
              cssnano(),
              postcssPresetEnv()
            ]
          }
        }
      ]
    }
  ]
}

保存文件，然后重新编译。

使用 PostCSS 进行构建

最后，正式使用PostCSS构建项目！使用PostCSS-CLI构建CSS文件（CSS文件必须在当前工作目录下）：

postcss src/*.css

该命令将自动应用PostCSS中的所有插件，最终生成新的样式文件。

总结

告别繁琐的CSS编写！使用PostCSS和PostCSS-CLI可以轻松满足你的编译需求，节约时间，提高工作效率。