Ember CSS Modules 安装与配置指南

1. 项目基础介绍

Ember CSS Modules 是一个将 CSS Modules 集成到 Ember.js 应用中的项目。它允许开发者使用 CSS Modules 的模块化特性来编写更加可维护的样式代码。该项目主要使用 JavaScript 编程语言，并且与 Ember.js 框架紧密集成。

2. 项目使用的关键技术和框架

本项目主要使用以下技术和框架：

• JavaScript: 作为主要的编程语言。
• Ember.js: 一个开源的 JavaScript 框架，用于创建单页应用程序。
• CSS Modules: 一种 CSS 的模块化方案，能够局部作用样式并避免全局冲突。

3. 项目安装和配置的准备工作及详细步骤

准备工作

在开始安装之前，请确保您的开发环境满足以下要求：

• Node.js：本项目依赖于 Node.js 环境，请确保安装了 Node.js，推荐使用 LTS 版本。
• Ember CLI：Ember 的命令行工具，用于创建和开发 Ember 应用。
• Git：用于从 GitHub 克隆项目代码。

安装步骤

1. 克隆项目：

   首先，您需要在本地克隆项目仓库：

   git clone https://github.com/salsify/ember-css-modules.git
   cd ember-css-modules
   

2. 安装依赖：

   进入项目目录后，使用以下命令安装项目依赖：

   npm install
   

3. 创建一个 Ember 应用：

   在项目根目录下，使用 Ember CLI 创建一个新的 Ember 应用：

   ember new my-app --skip-git
   

4. 将 Ember CSS Modules 添加到您的 Ember 项目：

   进入到您的 Ember 应用目录，然后安装 ember-css-modules：

   cd my-app
   ember install ember-css-modules
   

5. 配置 Ember 应用以使用 CSS Modules：

   在 Ember 应用中，您需要配置 ember-cli-build.js 文件来启用 CSS Modules。在 app 的部分，添加如下配置：

   // ember-cli-build.js
   const { Webpack } = require('@embroider/webpack').webpack;
   const { addPlugin } = require('@embroider/core');
   
   module.exports = function (env) {
     let config = {};
   
     // ... 其他配置 ...
   
     config = merge(config, {
       'ember-css-modules': {
         include: ['app/**/*'],
         exclude: ['app/styles'],
       },
     });
   
     // 如果您正在使用 embroider，添加以下配置
     config = addPlugin(config, new Webpack({
       // ... webpack 配置 ...
     }));
   
     return config;
   };
   

6. 使用 CSS Modules：

   在 Ember 组件中，您可以按照以下方式使用 CSS Modules：

   <style module>
   .my-class {
     color: blue;
   }
   </style>
   
   <div class={{this.className}}>{{this.text}}</div>
   

   在对应的 JavaScript 文件中，您可以这样引用样式：

   import Component from '@glimmer/component';
   import { module } from 'ember-css-modules';
   
   export default class MyComponent extends module(Component) {
     className = 'my-class';
     text = 'Hello, CSS Modules!';
   }
   

按照以上步骤，您应该能够成功安装和配置 Ember CSS Modules 并在您的 Ember 应用中使用它。