首页 文章

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

提问于
浏览 次
2

我目前正在开发一个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 的级别相同

angularjs sass web-component

1 回答

  • 1

    通过创建封闭组件，我也遇到了同样的问题 .

    我的方法

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

    首先，它是一种使用assets文件夹存储视图中所有独立资产的好方法 . 我也更喜欢在你的样式表（SASS）中使用 vendor.scss 来获得一个
    像导入路径这样的分隔文件（你将通过变量来限制：sass/compass import variable issue） .

    directory structure

    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 中使用 .

    回复于

相关问题