Question

我目前正在开发一个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

的级别相同

Answer 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解决了存储路径变量的问题。
是的，它本身就存在了。当您首先导入vendors.scss中的applicaion.scss并在那里定义了一个变量时，您也可以在application.scss中找到它。

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

1 个答案:

我的方法

您的问题