Include SASS file only in development environment

Questions General
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') {
     ...
  }
}
1 Like
3

In case someone is interested, the solution I come up with for handling this in my application is to have existing files for each of my conditions and include the appropriate path during build. This doesn’t share environment variables with SASS, but it was sufficient for my purposes to use different variables dependent on which environment.

// in ember-cli-build.js
...
  sassOptions() {
    includePaths: [
      'app/styles/variables/environment/' + (
        env === 'production' ? 'production'
          : env === 'test' ? 'test'
          : 'development'
      ),
    ],
  },
...

Then I have files:

  • app/variables/environment
    • development/environment/_variables.scss
    • test/environment/_variables.scss
    • production/environment/_variables.scss

The outer environment directory is to cordon these files from other files in the variables directory. The inner environment directory is give the import a namespace.

I can then import conditionally included files:

@import 'environment/variables';
1 Like