1 | # `ember-cli-eyeglass` [![Build Status](https://travis-ci.org/sass-eyeglass/ember-cli-eyeglass.svg?branch=master)](https://travis-ci.org/sass-eyeglass/ember-cli-eyeglass)<Paste>
|
2 |
|
3 | This Ember CLI Addon makes it trivial to compile your sass files with
|
4 | eyeglass support via node-sass.
|
5 |
|
6 | ## Installation
|
7 |
|
8 | `yarn add ember-cli-eyeglass`
|
9 |
|
10 | Then rename all your `.css` files so they have the `.scss` extension.
|
11 |
|
12 | ## Configuration
|
13 |
|
14 | In your application's ember-cli-build.js the key `"eyeglass"` can be
|
15 | set to an options object that will be passed to broccoli-eyeglass. For
|
16 | details on the options available, please read the [broccoli-eyeglass
|
17 | options documentation](https://github.com/sass-eyeglass/broccoli-eyeglass#options).
|
18 |
|
19 | ### Apps
|
20 |
|
21 | ```js
|
22 | // path/to/app/ember-cli-build.js
|
23 | const app = new EmberApp(defaults, {
|
24 | eyeglass: {
|
25 | /* Enable discovery of Sass files to compile.
|
26 | All files not beginning with an underscore will be compiled. */
|
27 | discover: true,
|
28 | /* apply other broccoli-eyeglass options here */
|
29 | /* apply node-sass options here */
|
30 | eyeglass: {
|
31 | /* eyeglass options */
|
32 | }
|
33 | }
|
34 | });
|
35 | ```
|
36 |
|
37 | Given the following layout:
|
38 |
|
39 | ```
|
40 | app/styles/app.scss
|
41 | other.scss
|
42 | _shared.scss
|
43 | ```
|
44 |
|
45 |
|
46 | Will result in:
|
47 |
|
48 | `assets/<app-name>.css` containing the compiled output of `app/styles/app.scss`
|
49 | `assets/foo.css` containing the compiled output of `app/styles/foo.scss`
|
50 |
|
51 | The contents of `app/styles/_shared.scss` will not be compiled directly but will be available for import. For example, `app.scss` can have `@import "shared";` to include the contents of that file in its output.
|
52 | (Note: files beginning with an underscore are called *partials* in Sass's documentation.)
|
53 |
|
54 |
|
55 | ### Addons
|
56 |
|
57 | To make an ember-addon (both in-repo and from node_modules) behave as an eyeglass module, add `"eyeglass-module"` to the `package.json`'s `"keywords"` array and add the [relevant config](https://github.com/linkedin/eyeglass/tree/master/packages/eyeglass#writing-an-eyeglass-module) to the `"eyeglass"` property in `package.json`. To compile the addon's styles from `addon/styles` using eyeglass, add `ember-cli-eyeglass` as a dependency of the addon in question.
|
58 |
|
59 | ember-addons have two important directories, `app` and `addon`:
|
60 |
|
61 | #### my-addon/app/styles
|
62 |
|
63 | These assets are only considered for top-level addons, stylesheets in `app` directories of nested-addons are ignored.
|
64 |
|
65 | Given the following folder structure:
|
66 |
|
67 | ```
|
68 | my-addon/app/styles/
|
69 | /my-addon.scss
|
70 | /my-other-file.scss
|
71 | /_a-partial.scss
|
72 |
|
73 | ```
|
74 |
|
75 | * `my-addon/app/styles` - The non-partial `scss` files will become independent css files in the built output.
|
76 | * `my-addon/addon/styles` - The non-partial `scss` files will be compiled and the output merged into your application's `vendor.css`;
|
77 |
|
78 |
|
79 | Will result in:
|
80 |
|
81 | `assets/my-addon.css` containing the compiled output of `my-addon/app/styles/my-addon.scss`
|
82 | `assets/my-other-file.css` containing the compiled output of `my-addon/app/styles/my-other-file.scss`
|
83 | `_a-partial.scss` will not be included by default, unless the files in `my-app/app/styles/` or `my-addon/app/styles` import it.
|
84 |
|
85 |
|
86 |
|
87 | #### my-addon/addon/styles/
|
88 |
|
89 | These assets merged namespaced by the current addons name for all addons.
|
90 |
|
91 | Given the following folder structure:
|
92 |
|
93 | ```
|
94 | my-addon/addon/styles/
|
95 | /_shared.scss
|
96 | /my-addon.scss
|
97 | /secondary.scss
|
98 | ```
|
99 |
|
100 | The contents of `my-addon/addon/styles/my-addon.scss` will be added to `assets/vendor.css`.
|
101 | The contents of `my-addon/addon/styles/secondary.scss` will be added to `assets/vendor.css`.
|
102 | The contents of `my-addon/addon/styles/_shared.scss` will only be included if `my-addon.scss` or `secondary.scss` explicitly import them.
|
103 |
|
104 | ### Engines
|
105 |
|
106 | Engines are enhanced addons, who optionally (if lazy) provide alternative `app` and `vendor` output.
|
107 |
|
108 | ```js
|
109 | // path/to/engine/index.js
|
110 | const app = new EmberEngine(defaults, {
|
111 | eyeglass: {
|
112 | discover: true,
|
113 | /* broccoli-eyeglass options */
|
114 | /* node-sass options */
|
115 | eyeglass: {
|
116 | /* eyeglass options */
|
117 | }
|
118 | }
|
119 | });
|
120 | ```
|
121 |
|
122 | Given the following folder structure:
|
123 |
|
124 | ```
|
125 | my-engine/
|
126 | /app/styles/
|
127 | /my-engine.scss
|
128 | /my-other-file.scss
|
129 | /_shared.scss
|
130 | /addon/styles/
|
131 | /_shared.scss
|
132 | /my-engine.scss
|
133 | /secondary.scss
|
134 | ```
|
135 |
|
136 | If this is an eager engine:
|
137 |
|
138 |
|
139 | The contents of `my-engine/app/styles/my-engine.scss` will become `dist/assets/my-engine.css`
|
140 | The contents of `my-engine/app/styles/my-other-file.scss` will become `dist/assets/my-other-file.css`
|
141 | The contents of `my-engine/app/styles/_shared.scss` will only be included if `my-engine.scss` or `my-other-file.scss` explicitly import them.
|
142 |
|
143 | The contents of `my-engine/addon/styles/my-addon.scss` will be added to `dist/assets/vendor.css`
|
144 | The contents of `my-engine/addon/styles/secondary.scss` will be added to `dist/assets/vendor.css`
|
145 | The contents of `my-engine/addon/styles/_shared.scss` will only be included if `my-addon.scss` or `secondary.scss` explicitly import them.
|
146 |
|
147 | If this is a lazy engine:
|
148 |
|
149 | The contents of `my-engine/app/styles/my-engine.scss` will be ignored
|
150 | The contents of `my-engine/app/styles/my-other-file.scss` will be ignore
|
151 | The contents of `my-engine/app/styles/_shared.scss` will be ignored unless imported.
|
152 |
|
153 | The contents of `my-engine/addon/styles/my-addon.scss` will be added to `dist/engine-dist/my-engine/assets/engine.css`
|
154 | The contents of `my-engine/addon/styles/secondary.scss` will be added to `dist/engine-dist/my-engine/assets/engine.css`
|
155 | The contents of `my-engine/addon/styles/_shared.scss` will only be included if `my-addon.scss` or `secondary.scss` explicitly import them.
|
156 |
|
157 |
|
158 | ## Building
|
159 |
|
160 | * `ember build`
|
161 |
|
162 | For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
|