Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
bin Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
config Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
node-tests Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
src [ember-cli-eyeglass] Relativize linked assets against the httpRoot of… Apr 19, 2019
tests [ember-cli-eyeglass] Enable skipped test. It was fixed recently as pa… Apr 12, 2019
.editorconfig Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
.ember-cli Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
.eslintignore Make linting work in ember-cli-eyeglass. Feb 16, 2019
.eslintrc Make linting work in ember-cli-eyeglass. Feb 16, 2019
.gitignore Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
.npmignore Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
.travis.yml Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
.watchmanconfig Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
CHANGELOG.md ember-cli-eyeglass@6.4.2 Apr 19, 2019
LICENSE Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
NOTICE Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
README.md Update packages/ember-cli-eyeglass/README.md Mar 12, 2019
ember-cli-build.js Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
jsconfig.json Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
package.json ember-cli-eyeglass@6.4.2 Apr 19, 2019
testem.js Add 'packages/ember-cli-eyeglass/' from commit '77d27c63553627962d849… Sep 6, 2018
tsconfig.json Make linting work in ember-cli-eyeglass. Feb 16, 2019

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.