Skip to content

标准压缩器 CSS

¥Standard Minifier CSS

此软件包是 Meteor 应用中的默认 css 压缩器。除了在生产版本中最小化 css 代码之外,它还运行为应用配置的任何 PostCSS 插件。

¥This package is the default css minifier in Meteor apps. In addition to minifying the css code in production builds, it also runs any PostCSS plugins configured for the app.

Post CSS

此软件包可以选择在你应用中的 css 文件上运行 PostCSS 插件。要启用:

¥This package can optionally run PostCSS plugins on the css files in your app. To enable:

  1. 安装 npm 对等依赖:

    ¥Install npm peer dependencies:

sh
meteor npm install -D postcss postcss-load-config
  1. 添加 PostCSS 配置。创建一个 postcss.config.js 文件并添加配置:

    ¥Add PostCSS Config. Create a postcss.config.js file and add a config:

js
module.exports = {
  plugins: {
    autoprefixer: {},
  }
};

示例配置启用了 autoprefixer postcss 插件。你可以通过运行 meteor npm install -D autoprefixer 安装插件。

¥The example config enables the autoprefixer postcss plugin. You can install the plugin by running meteor npm install -D autoprefixer.

了解有关 配置 postcss 的更多信息或查找 可用插件 列表。

¥Learn more about configuring postcss or find a list of available plugins.

对 PostCSS 配置进行更改后,必须重新启动 meteor 才能使用新配置。

¥After making changes to the PostCSS Config, meteor must be restarted for it to use the new config.

排除 Meteor 包

¥Exclude Meteor Packages

除了应用中的 css 文件外,PostCSS 还将处理从 Meteor 包添加的 css 文件。如果你不想处理这些文件,或者它们与你的 PostCSS 配置不兼容,你可以使用 excludedMeteorPackages 选项让 PostCSS 忽略它们:

¥In addition to the css files in your app, PostCSS will also process the css files added from Meteor packages. In case you do not want these files to be processed, or they are not compatible with your PostCSS config, you can have PostCSS ignore them by using the excludedMeteorPackages option:

js
module.exports = {
  plugins: {
    autoprefixer: {},
  },
  excludedMeteorPackages: [
    'github-config-ui',
    'constellation:console'
  ]
};

Tailwind CSS

完全支持 Tailwind CSS。由于 HMR 在更新 css 之前将更新应用于 js 文件,因此在应用样式之前第一次使用 Tailwind CSS 类时可能会有延迟。

¥Tailwind CSS is fully supported. Since HMR applies updates to js files earlier than the css is updated, there can be a delay when using a Tailwind CSS class the first time before the styles are applied.

调试

¥Debbuging

从 Meteor.js 2.11.0 开始,在这个 PR 中,我们为 minifier 提供了一个 debbug 模式

¥Since Meteor.js 2.11.0 in this PR we have a debbug mode for the minifier

standard-minifier-css 如何变得冗长

¥How standard-minifier-css becomes verbose

  • 任一常见的调试命令行参数

    ¥Either of the common debugging commandline arguments

    • --verbose

    • --debug

  • 环境变量

    ¥Environment variable

    • DEBUG_CSS

旁注:DEBUG_CSS=falseDEBUG_CSS=0 将阻止它冗长,无论 --verbose--debug 命令行参数如何,因为 DEBUG_CSS 是特定的。

¥Side notes: DEBUG_CSS=false or DEBUG_CSS=0 will prevent it from being verbose regardless of --verbose or --debug commandline arguments, because DEBUG_CSS is specific.