npm 包 Ember-component-css 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

Ember-component-css 是一个能够将组件样式打包进组件内部的 webpack loader。通过它，我们可以不必担心样式污染问题，也不必手动引入样式文件，而是直接在组件内写样式，能够大大简化前端开发流程。

安装

Ember-component-css 是一个 npm 包，可以在命令行中使用以下命令进行安装：

npm install ember-component-css --save-dev

使用

配置 webpack

在使用 Ember-component-css 前，需要先配置 webpack。在 webpack.config.js 中，我们需要使用它提供的 loader：

-- -------------------- ---- -------
-------------- - -
  ------- -
    ------ -
      -
        ----- --------------------
        ------- -----------------------------
      --
    --
  --
--

在组件中使用

在组件的 .js 文件中，我们需要声明所需要的样式：

import styles from './my-component.component.css';

在 .hbs 文件中，我们直接使用所定义的样式，而不必担心命名冲突问题：

<div class={{styles.wrapper}}>
  ...
</div>

默认配置

默认情况下，Ember-component-css 会将样式名加上 hash 值。这个 hash 值是根据样式文件的内容生成的。同时，它还会自动将组件的样式和其它样式分离成两个 CSS 文件，以尽量减小文件大小。

配置选项

Ember-component-css 还提供了一些可配置选项：

enableDynamicStyles: 默认为 false，如果设置为 true，则可以在运行时使用动态样式
cssModules: 默认为 true，如果设置为 false，则不使用 CSS modules
rootElement: 默认为 ""，指定应将 CSS 样式作用于哪个元素

我们可以在 .ember-cli-build.js 中指定这些选项：

-- -------------------- ---- -------
-------------- - ------------------ -
  --- --- - --- ------------------ -
    ------------------ -
      -------------------- -----
      ----------- ------
      ------------ -------
    --
  ---
  ------ -------------
--

示例代码

组件样式

.wrapper {
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
}

组件代码

import Component from '@ember/component';
import styles from './my-component.component.css';

export default Component.extend({
  classNames: [styles.wrapper],
});

<div class="{{styles.wrapper}}">
  <h2>Hello World</h2>
</div>

总结

Ember-component-css 是一个极其方便的工具，可以解决样式命名冲突问题，减少前端开发中的繁琐操作。本文介绍了它的用法和一些配置选项，希望对大家能有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60097