Include SASS file only in development environment


#1

Hi, I would like to highlight deprecated css classes in my ember app, but I would like to do it only in development environment so me and my colleagues can fix it over time without distracting users. Is there an easy way to include conditionally SASS file in Ember?

Snippet looks like this:

@mixin deprecated($message) {
  &:before {
    content: $message;
    border: 2px solid red;
  }
}

.old-class {
  @import deprecated("Replace with .new-class");
  ...
}

We’re using multiple apps with multiple custom addons so ideally it should work for all of them.

Thank you


#2

In case someone is interested, the solution I come up with is to create a file during build that contains environment variable.

// in addons index.js
const writeFile = require('broccoli-file-creator');
...
  treeForStyles() {
    let tree = this._super.treeForStyles.apply(this, arguments);

    let target = this._findHost();
    let { env } = target;

    let sassEnvironmentFile = writeFile(
      '/app/styles/environment-variable.scss',
      `$environment: "${env}"`
    );

    return merge([sassEnvironmentFile, tree]);
  }

Import this file in your app.scss file and you can then use if in the mixin to conditionally display that.

@mixin deprecated($message) {
  @if $environment == 'development') {
     ...
  }
}