Ember CLI Postcss 使用教程

Ember CLI Postcss 使用教程

ember-cli-postcss🔥 Postcss for Ember项目地址:https://gitcode.com/gh_mirrors/em/ember-cli-postcss

项目介绍

Ember CLI Postcss 是一个 Ember CLI 插件，允许你在 Ember 应用和插件中使用 JavaScript 插件来转换 CSS。Postcss 通过创建 CSS 的 AST（抽象语法树）表示，并应用一系列插件进行转换，提供了使用遵循 CSS 规范的插件或添加强大的自定义转换的能力。

项目快速启动

安装

首先，你需要安装 ember-cli-postcss 插件：

ember install ember-cli-postcss

配置

在 ember-cli-build.js 文件中配置插件：

// ember-cli-build.js
const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const CssImport = require('postcss-import');
const PresetEnv = require('postcss-preset-env');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    postcssOptions: {
      compile: {
        plugins: [
          {
            module: CssImport,
            options: {
              path: ['node_modules']
            }
          },
          {
            module: PresetEnv,
            options: {
              stage: 1
            }
          }
        ]
      }
    }
  });

  return app.toTree();
};

应用案例和最佳实践

应用案例

假设你正在开发一个 Ember 插件，并希望使用 ember-cli-postcss 处理 CSS，以便在消费该插件的 Ember 应用中自动包含在 vendor.css 中。你可以按照以下步骤操作：

1. 在 addon/styles/addon.css 中创建你的样式（如果安装了 postcss-import 插件，可以导入其他 CSS 文件）。
2. 在 package.json 中添加 before 选项：

// package.json
"ember-addon": {
  "before": [
    "ember-cli-postcss"
  ],
  "configPath": "tests/dummy/config"
}

3. 配置插件选项以处理 postcss：

// index.js
const CssImport = require('postcss-import');
const PresetEnv = require('postcss-preset-env');

module.exports = {
  name: require('./package').name,
  included: function(app) {
    this._super.included.apply(this, arguments);
    app.options = app.options || {};
    app.options.postcssOptions = {
      compile: {
        plugins: [
          {
            module: CssImport,
            options: {
              path: ['node_modules']
            }
          },
          {
            module: PresetEnv,
            options: {
              stage: 1
            }
          }
        ]
      }
    };
  }
};

最佳实践

• 使用 postcss-import 插件来管理 CSS 文件的导入。
• 使用 postcss-preset-env 插件来支持未来的 CSS 语法。
• 在 ember-cli-build.js 中配置插件，确保插件在构建过程中正确应用。

典型生态项目

• Ember CLI: Ember 的命令行工具，用于构建 Ember 应用。
• Postcss: 一个用 JavaScript 转换 CSS 的工具。
• Autoprefixer: 一个 Postcss 插件，用于自动添加 CSS 厂商前缀。
• Stylelint: 一个 CSS 代码检查工具，可以与 Postcss 集成。

通过这些工具和插件的组合，你可以高效地开发和维护 Ember 应用的样式。

ember-cli-postcss🔥 Postcss for Ember项目地址:https://gitcode.com/gh_mirrors/em/ember-cli-postcss