CODEWITHSUNDEEP
ember.jsember-cli
Soviut
Soviut

Reputation: 91535

How to get Ember CLI to only recompile SASS when styles change?

I'm onboarding onto a project built using Ember. The project uses ember-cli-sass to watch and compile .scss files. The project is fairly large and componentized, with over 100 separate scss files, many of them outside the /styles folder, in their respective components folders. As a result, the ember-cli-build.js configuration looks like:

sassOptions: {
  includePaths: ['app']
}

The list is truncated a little bit, but the point is, the project has to include the /app path in its list of folders to watch in order to hear all the possible style changes.

This has two side effects. First, it makes for fairly slow SASS compiles. Second, SASS compiles occur when literally any file in the /app hierarchy changes, including javascript files.

Is there any way to configure ember-cli or ember-cli-sass to only compile on .scss changes?

Upvotes: 1

Views: 781

Answers (1)

jacefarm
jacefarm

Reputation: 7411

You should reference your app's many .scss files within the primary app/styles/app.sass manifest (which follows convention), like this:

//    Component SCSS
// -------------------------------------
@import "../components/component-a"
@import "../components/component-b"
@import "../components/component-c"
etc.

Broccoli is configured to look for the app.sass manifest file in app/styles, and thus, you would no longer need to set includePaths:

sassOptions: {},

...thereby avoiding a watch of the entire app directory tree.

However, if that is prohibitive for whatever reason, given that the .scss files are mingled alongside their respective components, you might consider tightening the designated paths for the includePaths option to reduce some of the watching:

sassOptions: {
  includePaths: [
    'app/components',
    'app/styles',
  ]
}

If you are not relying on styles also being set via linked NPM modules, you can restrict even further by setting the onlyIncluded option as well:

sassOptions: {
  includePaths: [
    'app/components',
    'app/styles',
  ],
  onlyIncluded: true
}

Setting the onlyIncluded option "helps with performance when using NPM linked modules".

Upvotes: 2

Related Questions