Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
bin
config
node-tests
src
tests
.editorconfig
.ember-cli
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
.watchmanconfig
CHANGELOG.md
LICENSE
NOTICE
README.md
ember-cli-build.js
jsconfig.json
package.json
testem.js
tsconfig.json

README.md

ember-cli-eyeglass Build Status

This Ember CLI Addon makes it trivial to compile your sass files with eyeglass support via node-sass.

Installation

yarn add ember-cli-eyeglass

Then rename all your .css files so they have the .scss extension.

Configuration

In your application's ember-cli-build.js the key "eyeglass" can be set to an options object that will be passed to broccoli-eyeglass. For details on the options available, please read the broccoli-eyeglass options documentation.

Apps

// path/to/app/ember-cli-build.js
const app = new EmberApp(defaults, {
  eyeglass: {
    /* Enable discovery of Sass files to compile.
       All files not beginning with an underscore will be compiled. */
    discover: true,
     /* apply other broccoli-eyeglass options here */
     /* apply node-sass options here */
    eyeglass: {
      /* eyeglass options */
    }
  }
});

Given the following layout:

app/styles/app.scss
           other.scss
           _shared.scss

Will result in:

assets/<app-name>.css containing the compiled output of app/styles/app.scss assets/foo.css containing the compiled output of app/styles/foo.scss

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. (Note: files beginning with an underscore are called partials in Sass's documentation.)

Addons

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 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.

ember-addons have two important directories, app and addon:

my-addon/app/styles

These assets are only considered for top-level addons, stylesheets in app directories of nested-addons are ignored.

Given the following folder structure:

my-addon/app/styles/
                   /my-addon.scss
                   /my-other-file.scss
                   /_a-partial.scss
                      
  • my-addon/app/styles - The non-partial scss files will become independent css files in the built output.
  • my-addon/addon/styles - The non-partial scss files will be compiled and the output merged into your application's vendor.css;

Will result in:

assets/my-addon.css containing the compiled output of my-addon/app/styles/my-addon.scss assets/my-other-file.css containing the compiled output of my-addon/app/styles/my-other-file.scss _a-partial.scss will not be included by default, unless the files in my-app/app/styles/ or my-addon/app/styles import it.

my-addon/addon/styles/

These assets merged namespaced by the current addons name for all addons.

Given the following folder structure:

my-addon/addon/styles/
                     /_shared.scss
                     /my-addon.scss
                     /secondary.scss             

The contents of my-addon/addon/styles/my-addon.scss will be added to assets/vendor.css. The contents of my-addon/addon/styles/secondary.scss will be added to assets/vendor.css. The contents of my-addon/addon/styles/_shared.scss will only be included if my-addon.scss or secondary.scss explicitly import them.

Engines

Engines are enhanced addons, who optionally (if lazy) provide alternative app and vendor output.

// path/to/engine/index.js
const app = new EmberEngine(defaults, {
  eyeglass: {
    discover: true,
    /* broccoli-eyeglass options */
    /* node-sass options */
    eyeglass: {
      /* eyeglass options */
    }
  }
});

Given the following folder structure:

my-engine/
         /app/styles/
                    /my-engine.scss
                    /my-other-file.scss
                    /_shared.scss
         /addon/styles/
                      /_shared.scss
                      /my-engine.scss
                      /secondary.scss             

If this is an eager engine:

The contents of my-engine/app/styles/my-engine.scss will become dist/assets/my-engine.css The contents of my-engine/app/styles/my-other-file.scss will become dist/assets/my-other-file.css 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.

The contents of my-engine/addon/styles/my-addon.scss will be added to dist/assets/vendor.css The contents of my-engine/addon/styles/secondary.scss will be added to dist/assets/vendor.css The contents of my-engine/addon/styles/_shared.scss will only be included if my-addon.scss or secondary.scss explicitly import them.

If this is a lazy engine:

The contents of my-engine/app/styles/my-engine.scss will be ignored The contents of my-engine/app/styles/my-other-file.scss will be ignore The contents of my-engine/app/styles/_shared.scss will be ignored unless imported.

The contents of my-engine/addon/styles/my-addon.scss will be added to dist/engine-dist/my-engine/assets/engine.css The contents of my-engine/addon/styles/secondary.scss will be added to dist/engine-dist/my-engine/assets/engine.css The contents of my-engine/addon/styles/_shared.scss will only be included if my-addon.scss or secondary.scss explicitly import them.

Building

  • ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

You can’t perform that action at this time.