Rewriting Urls of selector-nested imports

[CmdrShepardsPie]

I'm finding that if I import a .scss file at the root level, it rewrites the urls inside the imported file correctly: @import '~core/src/styles/web.scss';

but if I nest it in another selector (because we're going to be switching base style sheets on the fly, and thus assign them all to different base selectors) it doesn't rewrite the urls in the included .scss file:

    . web {
        @import '~core/src/styles/web.scss';
    }
    . tv {
        @import '~core/src/styles/tv.scss';
    }

Is this expected behavior? Is there another way to do this or make it work? (Definitely open to suggestions for a different structure)

Thanks!

[bholloway]

Hmmm... I think we would need a small sample that we can run through the source-map visualisation.

[bholloway]

Ping @CmdrShepardsPie. Any progress?

[graingert]

@bholloway I'm running up against this.

My example file would be:

.legacy {
  @import '~bootstrap/dist/css/bootstrap';
}

[graingert]

@bholloway my example file: https://github.com/graingert/es6-webpack2-starter/commit/81ba4351bee73fdb7de01445f11a8c895cd3832b

[graingert]

should be green ticks, but I get red crosses.

[graingert]

@bholloway

and here's the sourceMap: https://github.com/graingert/es6-webpack2-starter/blob/resolve-url-loader-fail/dist/app-b5aea7e42889629bb593.map

I'm getting strange src/App/src/App repetition.

[graingert]

@bholloway actually it seems to work for simple .scss files: https://github.com/graingert/es6-webpack2-starter/commit/57e03d0b34bf702d7403cf11be47e733994348d1

the origianal issue was a config error.

However I do get an issue with bootstrap:

bootstrap.css: https://github.com/graingert/es6-webpack2-starter/commit/a57290345e7b1c9bba5f84b0aa90a1a865c80d29

[graingert]

ah the reason being scss loader is adding:

@font-face {
  .container {
    font-family: 'Glyphicons Halflings';
    src: url("../fonts/glyphicons-halflings-regular.eot");
    src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");
  }
}

[graingert]

here's the issue https://github.com/sass/sass/issues/1251

@CmdrShepardsPie I can't repeat your issue.

[bholloway]

Please refer to #97 as version 3 may help any open issues.

[bholloway]

We have a new version 3.0.0. There is an e2e test with such nested selector/directive and it confirms working with engine:postcss.

As such I am closing this as fixed.