2

我目前正在开发一个 angularjs 项目并尝试构建可重用的组件 - 深受这篇文章的启发（这也催生了angular 组件规范）。

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

我想要的一些东西：

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

目前我的想法是：

在我的凉亭组件目录（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

4

1 回答 1

1

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

我的方法

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

首先，它是使用资产文件夹存储视图中所有分离资产的好方法。我还希望vendor.scss在您的样式表（SASS）中使用一种 a 来
为导入路径之类的东西创建一个单独的文件（您将遇到变量的限制：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

供应商.scss

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

遗憾的是，通配符导入当前不支持。

你的问题

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

  2. 我没有清楚地得到你的问题，但我想vendors.scss解决了路径变量的存储问题。

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

于 2013-09-26T15:24:59.423 回答