Webpack, sass, Import css with url

Question

I import a css file with a font-face declared in it with a relative URL.

@import '~materialize-css/dist/css/materialize.min';

.register-container {
  @extend .row;
}

I use the raw-loader!sass-loader chain because it's an angular component style.

{
    test: /\.scss$/,
    include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
    loader: 'raw!sass'
},

When I do that the content of the materialize file is being copied. And when I load the page it tries to load the fonts from a wrong directory because the relative path is wrong.

The fonts work because I load them with different loaders chain in a different file. The chain is: css!resolve-url!sass?sourceMap

So the fonts are there but the issue is that the content of the css is copied twice and it loads the fonts multiple times from a front path

Can I do something about it? So that the sass loader will know not to copy the css content?

raduken raduken · Accepted Answer · 2016-07-01T11:48:20

Might Help?

$font-url: unquote("somefile.css");
@if variable-exists(font-url) {
  @import url($font-url);
} @else {
  @error "sorry no dice";
}

String Functions

unquote($string)

Removes quotes from a string.

- (Sass::Script::Value::String) unquote($string)

Removes quotes from a string. If the string is already unquoted, this will return it unmodified.

Examples:

unquote("foo") => foo
unquote(foo) => foo

Webpack, sass, Import css with url

1 Answers