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 应用程序中 CSS 处理的插件，它利用 PostCSS 技术栈来提供高效的样式处理解决方案。虽然具体的仓库链接未直接提供详细目录结构，我们可以基于常规的 Ember 插件结构进行概述：

• addon/: 包含插件的核心代码，如 index.js 定义了插件的主要行为，可能还有样式文件(styles)用于内部示例或组件。
• app/: 在这个上下文中，通常指的是使用该插件的应用中如何组织CSS文件的指导，而非插件本身包含的这部分。
• ember-cli-build.js: 配置文件，用于定义构建流程，包括引入Ember CLI PostCSS。
• test/: 测试目录，包含了确保插件功能正常的测试套件。
• package.json: 主要的项目元数据文件，包括依赖、脚本命令以及配置项，比如“ember-addon”部分定义了其在 Ember 生态中的集成方式。
• README.md: 项目文档的主要来源，涵盖了安装、配置、基本用法等。

项目的启动文件介绍

安装与初始化

项目的“启动”主要通过以下步骤完成：

1. 安装插件：从终端运行 ember install ember-cli-postcss 来添加此插件到你的 Ember 项目中。
2. 配置：接下来，在 ember-cli-build.js 文件中配置插件以适应你的项目需求。这涉及到指定至少一个PostCSS插件，如autoprefixer或stylelint。

// ember-cli-build.js 示例配置
module.exports = function(defaults) {
  let app = defaults.app;

  // 添加插件配置
  app.options.postcssOptions = {
    plugins: [
      require('postcss-import'),
      require('postcss-preset-env')
    ]
  };

  return app.toTree();
};

这段代码演示了如何配置基础的PostCSS插件集合。

项目的配置文件介绍

ember-cli-build.js配置

这是核心构建配置文件，对于Ember CLI PostCSS来说，你需要在这里设置PostCSS的具体选项。例如，引入必要的插件，控制编译模式（编译个别文件或过滤所有CSS文件）等。

module.exports = function(defaults) {
  let app = defaults;
  
  if (!app.options) {
    app.options = {};
  }
  if (!app.options.postcssOptions) {
    app.options.postcssOptions = {
      // 插件配置示例
      plugins: [
        // 引入插件
      ],
      // 可选其他配置，依据具体插件而定
    };
  }

  return app.toTree();
};

package.json配置

在使用此插件开发Addon时，还需在package.json中特别注意ember-addon部分的配置，以确保插件正确地被消费应用所识别和使用：

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

以上简要介绍了如何与Ember CLI PostCSS互动的基础，更深入的配置和使用细节需参考仓库的最新README.md文件。

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