您如何为 angularjs 可重用组件打包资产？

Posted 2023-03-06

【中文标题】您如何为 angularjs 可重用组件打包资产？

【英文标题】：How do you package assets for angularjs resusable components?

【发布时间】：2013-10-02 08:08:37

【问题描述】：

我目前正在从事一个 angularjs 项目并尝试构建可重用的组件 - 深受 this article 的启发（这也催生了 angular component spec）。

我想知道应该如何打包要包含在组件中的图像/样式表？

我想要的一些东西：

Sass 样式 在组件目录中存储图像的地方，以及在样式表中引用它们的方法 使用组件的应用程序中可覆盖的样式

---

目前我的想法是：

在我的凉亭组件目录（app/public/components）中创建组件，所以我有

app
  |-- public
    |-- components
      |-- prefix-component-name
        |-- assets
          |-- img
            |-- ...
        |-- views
          |-- templates
          |-- sass
            |-- styles.scss   <-- Component styles
    |-- img
    |-- css
    |-- js
    index.html
  |-- views
    |-- sass
      |-- application.scss      <-- Application styles

application.scss 将导入组件的样式，例如

@import "../../public/components/prefix-component-name/views/sass/styles";

我不确定的事情：

我应该如何引用图像 - 如果应用程序开发人员的路径发生变化怎么办？在组件中为该路径创建一个 sass 变量？ 如何在应用程序中覆盖 sass 文件中的变量？我希望应用程序开发人员这样做吗？如果你在 sass 中覆盖一个变量，它似乎会从它改变的地方向下传播，所以应用程序只能自己改变它。 可以在导入时将路径传递给 sass 文件吗？

---

我的用例特定于 angularjs，但我确信同样的问题也适用于 W3C web components，以及像 polymer 和 mozilla brick 这样的库。

有什么想法吗？

编辑：views 文件夹与assets 处于同一级别

【参考方案1】：

创建封闭组件时我也遇到了同样的问题。

我的方法

在以下示例中，sass-bootstrap 用于演示目的，包括您自己的 prefix-component-name。

首先，它是使用资产文件夹存储视图中所有分离资产的好方法。 我还希望在您的样式表 (SASS) 中使用 vendor.scss 来获得一个 用于导入路径之类的分隔文件（您将受到变量的限制：sass/compass import variable issue）。

目录结构

app
  |-- public
    |-- components
       |-- prefix-component-name
          |-- assets
            |-- sass
               |-- styles.scss
            |-- img
            |-- ...
          |-- views
            |-- index.html
            |-- ...
      |-- bootstrap-sass
        |-- vendor
          |-- assets
            |-- stylesheets // https://github.com/thomas-mcdonald/bootstrap-sass/tree/master/vendor/assets/stylesheets
               |-- bootstrap
               |-- bootstrap.scss
        |-- ...
    |-- img
    |-- css
    |-- js
    index.html
  |-- views
    |-- sass
      |-- vendors.scss
      |-- application.scss

vendor.scss

@import '../../public/components/bootstrap-sass/vendor/assets/stylesheets/bootstrap.scss'; @import '../../public/components/prefix-component-name/assets/sass/styles.scss';

遗憾的是 wildcard imports 目前不支持。

您的问题

我喜欢使用单独的所有资产，这使得在样式表中引用相对于组件的图像变得容易。

我没有明确得到你的问题，但我猜vendors.scss 解决了路径变量的存储问题。

是的，它是天生的。当您第一次在applicaion.scss 中导入vendors.scss 并在其中定义了一个变量时，您在application.scss 中也可以使用它。