baseURL deprecation and SCSS assets

Ember CLI
1

Hey!

I’m trying to fix the baseURL deprecation (see: http://emberjs.com/blog/2016/04/28/baseURL.html).

It worked quite ok but I still have troubles fixing the paths for our assets which are referenced in our SCSS files (background-images etc). We are using ember-cli-sass and the problem is, that the baseURL is only known during build. So I can not simply adjust the paths.

How did you solve this problem?

Thanks a lot Tschoartschi

2

For now I created a “hack”. Maybe someone else needs it as well. What I did is, to create an ember-cli-addon which is executed on every build. The addon is executed before ember-cli-sass and writes a file to the tmp folder with the baseUrl as a sass-variable. My app.scss file includes this file and makes the variable available to all other files. In every other sass file I do a string concat for every path. In code this looks as follows:

lib/set-sass-path/package.json

{
    "name": "set-sass-path",
    "keywords": [
        "ember-addon"
    ],
    "ember-addon": {
        "before": "ember-cli-sass"
    }
}

lib/set-sass-path/index.js

/*jshint node:true*/
var fse = require('fs-extra');
var config = require('../../config/environment');
module.exports = {
    name: 'set-sass-path',

    isDevelopingAddon: function () {
        return true;
    },

    preBuild: function () {
        var env = process.env.EMBER_ENV;
        this.ui.writeLine('preBuild env "' + env + '"');
        var actualConfig = config(env);
        var rootURL = actualConfig.rootURL;
        var path = 'tmp/__webapp__sass';
        if (!fse.existsSync(path)) {
            this.ui.writeLine('preBuild path not exists "' + path + '"');
            fse.mkdirsSync(path);
        }
        var file = path + '/rootUrl.scss';
        var content = '$rootURL: "' + rootURL + '";';
        this.ui.writeLine('preBuild write to "' + file + '" the following content "' + content + '"');
        fse.writeFileSync(file, content);
    }

};

And in my app.scss

@import 'tmp/__roomle__sass/rootUrl.scss';

And in some …scss file

.toptag__construction {
  background-image: url('#{$rootURL}assets/images/icon_construction@2x.png');
}

So this is my “hacky” solution and until now it works quite fine :slight_smile: I’m sure there are better solutions but right now I don’t have the time to create a generic solution