postcss-cli和配置文件

postcss-cli和配置文件

  • postcss-cli
  • 配置文件

postcss-cli

cli 是一组单词的缩写(command line interface),为你提供了一组在命令行中可以操作的命令来进行处理。

postcss-cli 通过给我们提供一些命令行的命令来简化 postcss 的使用。

首先第一步还是安装:

pnpm add postcss-cli -D

安装完成后,我们就可以通过 postcss-cli 所提供的命令来进行文件的编译操作,在 package.json 里面添加如下的脚本:

"scripts": {
  	...
    "build": "postcss src/index.css -o ./build.css"
},
  • -o:表示编译后的输出文件,编译后的文件默认是带有源码映射。
  • –no-map:不需要源码映射
  • –watch:用于做文件变化的监听工作,当文件有变化的时候,会自动重新执行命令。注意如果使用了 –watch 来做源码文件变化的监听工作,那么一般建议把编辑器的自动保存功能关闭掉

关于 postcss-cli 这个命令行工具还提供了哪些命令以及哪些配置项目,可以参阅:www.npmjs.com/package/pos…

配置文件

一般我们会把插件的配置书写到配置文件里面,在配置文件里面,我们就可以指定使用哪些插件,以及插件具体的配置选项。

要使用配置文件功能,可以在项目的根目录下面创建一个名为 postcss.config.js 的文件,当你使用 postcss-cli 或者构建工具(webpack、vite)来进行集成的时候,postcss 会自动加载配置文件。

在 postcss.config.js 文件中书写如下的配置:

module.exports = {
  plugins: [
    require("autoprefixer")({
      overrideBrowserslist: "last 10 versions",
    }),
  ],
};

postcss 配置文件最主要的其实就是做插件的配置。postcss 官网没有提供配置文件相关的文档,但是我们可以在:github.com/postcss/pos… 这个地方看到 postcss 配置文件所支持的配置项目。

接下来我们来看一个 postcss 配置文件具体支持的配置项目:

  1. plugins:一个数组,里面包含要使用到的 postcss 的插件以及相关的插件配置。
module.exports = {
  plugins: [
    require("autoprefixer"),
    require("cssnano")({ preset: "default" }),
  ],
};
  1. map:是否生成源码映射,对应的值为一个对象
module.exports = {
  map: { inline: false },
  plugins: [/* Your plugins here */],
};

默认值为 false,因为源码映射一般是会单独存放在一个文件里面。

  1. syntax:用于指定 postcss 应该使用的 CSS 语法,默认情况下 postcss 处理的是标准的 CSS,但是有可能你的 CSS 是使用预处理器来写的,这个时候 postcss 是不认识的,所以这个时候需要安装对应的插件并且在配置中指明 syntax
module.exports = {
  syntax: "postcss-scss",
  plugins: [/* Your plugins here */],
};

安装postcss-scss这个插件,并且在配置文件中指定 syntax 为 postcss-scss,之后 PostCSS 就能够认识你的 sass 语法。

  1. parser:配置自定义解析器。Postcss 默认的解析器为 postcss-safe-parser,负责将 CSS 字符串解析为 CSS AST,如果你要用其他的解析器,那么可以配置一下
my-custom-parser是随便写的个名字哈
const customParser = require("my-custom-parser");

module.exports = {
  parser: customParser,
  plugins: [/* Your plugins here */],
};
  1. stringifier:自定义字符串化器。用于将 CSS AST 转回 CSS 字符串。如果你要使用其他的字符串化器,那么也是可以在配置文件中进行指定的。
const customStringifier = require("my-custom-stringifier");

module.exports = {
  stringifier: customStringifier,
  plugins: [/* Your plugins here */],
};

最后还剩下两个配置项:from、to,这两个选项官方是不建议你配置的,而且你配置的大概率还会报错,报错信息如下:

Config Error: Can not set from or to options in config file, use CLI arguments instead

这个提示的意思是让我们不要在配置文件里面进行配置,而是通过命令行参数的形式来指定。

至于为什么,官方其实解释得很清楚了:

In most cases options.from && options.to are set by the third-party which integrates this package (CLI, gulp, webpack). It’s unlikely one needs to set/use options.from && options.to within a config file.

因为在实际开发中,我们更多的是会使用构建工具(webpack、vite),这些工具会去指定入口文件和出口文件。

原文链接:https://juejin.cn/post/7353666640310321192 作者:buibui

(0)
上一篇 2024年4月6日 下午4:42
下一篇 2024年4月6日 下午4:52

相关推荐

发表回复

登录后才能评论