Sublime Text安装PostCSS-Sorting控制样式属性生成逻辑-sublime-PHP中文网

postcss-sorting 是纯 node.js 的 postcss 插件，非 sublime 插件，仅在命令行构建时按 postcss.config.js 中 properties-order 规则重排 css 属性，sublime 仅提供语法高亮与手动构建支持。

sublime text安装postcss-sorting控制样式属性生成逻辑

Sublime Text 本身不执行 PostCSS 排序，PostCSS-Sorting 是一个独立的 PostCSS 插件，它只在构建流程（如命令行运行 postcss 命令）中生效；Sublime 中所谓“控制样式属性生成逻辑”，实际是靠语法高亮 + 手动触发格式化 + 外部构建工具协同完成的。

PostCSS-Sorting 不是 Sublime 插件，别在 Package Control 里搜它

很多人装完 PostCSS 插件后，在 Package Control 搜索框输入 PostCSS-Sorting，结果找不到——因为它是纯 Node.js 的 PostCSS 插件，不是 Sublime 的 .sublime-package。它的作用是在你运行 npx postcss input.pcss -o output.css 这类命令时，按配置对 CSS 属性重排序，和编辑器无关。

正确路径：用 npm install --save-dev postcss postcss-sorting 安装到项目本地
必须配 postcss.config.js，写明 postcss-sorting 作为处理器，并定义 properties-order 规则
Sublime 的 PostCSS 插件（作者 ryanmr）仅提供语法支持和快捷键 Ctrl+Alt+X 触发构建，它不会读你的 postcss.config.js，更不会自动调用 postcss-sorting

想在保存时自动排序？得靠构建系统 + 自定义 build 文件

Sublime 默认没有“保存即排序”能力，强行启用容易和 Webpack/Vite 等热更新冲突，导致样式闪动或重复注入。真要实现，需手动配置一个构建系统，把 postcss 命令封装进去。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

菜单 → Tools → Build System → New Build System

填入内容（以 Linux/macOS 为例）：

{
  "shell_cmd": "npx postcss $file -o ${file_path}/${file_base_name}.css --config ${file_path}/postcss.config.js",
  "selector": "source.css, source.postcss",
  "file_regex": "^.*?([^\s]+)\s+([0-9]+):([0-9]+)"
}

保存为 PostCSS-Sorting.sublime-build，再在右下角语法栏选中文件后，按 Ctrl+B 手动触发
注意：$file 是当前 .pcss 路径，输出路径需与你项目实际加载逻辑一致，否则生成的 .css 文件可能不被引用

.pcss 文件里属性顺序写错，Sublime 不会报错但构建会失败

PostCSS-Sorting 只负责排序，不校验语法。如果你在 .pcss 里写了 @apply 但没配 postcss-mixins，或者用了 gap 却没开 postcss-gap-properties，Sublime 依然高亮正常，但命令行构建时会抛出 Unknown word 或 Cannot resolve 错误。

常见报错：PostCSS plugin postcss-sorting requires PostCSS 8 → 检查 package.json 里 postcss 版本是否 ≥8.4
Invalid options for postcss-sorting → 配置项写错，比如把 unspecified 写成 unspcified
Sublime 状态栏显示 CSS 而非 PostCSS → .pcss 文件未绑定语法，右下角点击后选 Open all with current extension as… → PostCSS