resolve url loader can not operate: css error

[applemate]

full error:

WARNING in ./~/resolve-url-loader!./~/css-loader?sourceMap!./~/react-virtualized-select/styles.css
  resolve-url-loader cannot operate: CSS error
  /Users/craigcosmo/Desktop/mrg-call-center-client/node_modules/react-virtualized-select/styles.css:6:51: property missing ':'

my webpack config

 {
        test: /\.css$/,
        loaders: ['style', 'resolve-url', 'css?sourceMap']
    },
    {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'resolve-url-loader?sourceMap', 'sass?sourceMap']
    },

Got this since I use something called react-virtualized in my component. It works well before I use react-virtualized though.

Here is some code inside Home.js component

import 'react-virtualized/styles.css';
import {Grid} from 'react-virtualized';

[bholloway]

Looks like badly formed CSS. I have not yet known the CSS parser to be wrong. Temporarily remove this loader and check your CSS is valid.

[le0nik]

Same thing for me. But the error is on @font-face:

  resolve-url-loader cannot operate: CSS error
  /Volumes/Workspace/ExampleProject/src/styles/example.scss:2:3: @font-face missing '}'

webpack config

    resolve: {
      alias: {
        globals: PATHS.globals,
        assets: PATHS.assets,
      }
    },
    {
        test: /\.scss$/,
        loaders: ['style', 'css?modules&importLoaders=2&sourceMap', 'resolve-url?sourceMap', 'sass?sourceMap']
    },

The file in question:

example.scss

@import `~globals/font-face-mixin.scss`;

@include font-face('icomoon', '~assets/fonts/icomoon');

font-face-mixin.scss

@function main-src($formats, $file-path, $font-family) {
  // Return the list of `src` values, in order, that
  // a good `@font-face` will need, including only
  // those formats specified in the list `$formats`.
  $result: ();
  @if index($formats, eot) {
    $eot-val: url('#{$file-path}.eot?#iefix') format('embedded-opentype');
    $result: append($result, $eot-val, comma);
  }
  @if index($formats, woff2) {
    $woff2-val: url('#{$file-path}.woff2') format('woff2');
    $result: append($result, $woff2-val, comma);
  }
  @if index($formats, woff) {
    $woff-val: url('#{$file-path}.woff') format('woff');
    $result: append($result, $woff-val, comma);
  }
  @if index($formats, ttf) {
    $ttf-val: url('#{$file-path}.ttf') format('truetype');
    $result: append($result, $ttf-val, comma);
  }
  @if index($formats, svg) {
    $svg-val: url('#{$file-path}.svg##{$font-family}') format('svg');
    $result: append($result, $svg-val, comma);
  }
  @return $result;
}

@mixin font-face (
  $font-family,
  $file-path,
  $weight: 400,
  $style: normal,
  $formats: eot ttf
) {
  @if index('italic' 'oblique', $weight) {
    $style: $weight;
    $weight: normal;
  }

  @font-face {
    font-family: $font-family;
    font-weight: $weight;
    font-style: $style;

    @if index($formats, eot) {
      src: url('#{$file-path}.eot');
    }
    src: main-src($formats, $file-path, $font-family);
  }
}

[le0nik]

Found the problem. If you use css-modules, the insides of @font-face declaration are wrapped in :global:

@font-face {
  :global {
    font-family: "aven-black";
    font-weight: 700;
    font-style: normal;
    src: url("~assets/fonts/aven-black.eot");
    src: url("~assets/fonts/aven-black.eot?#iefix") format("embedded-opentype"), url("~assets/fonts/aven-black.ttf") format("truetype");
  }
}

So rework fails on it.

Is there a way to work around it?

[bholloway]

If you are using CSS modules I would have thought you could eliminate this loader? There are some issues like this due to historic use of rework. They are not something I have experienced first hand. So I don't have any guidance short of rewrite using post CSS(?). That looks inevitable the only question is when. Sorry I don't have more help.

[le0nik]

@bholloway I tried to, by strangely it doesn't work without it either. css-loader can't resolve the path with ~ in CSSModules mode.

[bholloway]

@le0nik That's strange. Why would it not like the tilde?

I am not sure resolve-url-loader will help matters, since none of your paths are relative to imported CSS files. And the paths constructed with expressions will not resolve the way you expect.

Establish it is indeed a problem with tilde. If that is the case then try omit-tilde-webpack-plugin.

[le0nik]

I got it to work. I had to mention, that I was using [email protected]. omit-tilde-webpack-plugin doesn't work with it.

So here's how I got it to work:

example.scss(uses css-modules):

@import `~globals/font-face-mixin.scss`; // imported with tilde
@include font-face('icomoon', 'assets/fonts/icomoon'); // path without tilde. Why? I don't know.

The mixin itself is in the comment above.

I have absolutely no idea why this works, but it does. This kind of magic worries me :/, but at least I got it to work.

[bholloway]

@le0nik In scss and css all paths are considered relative. The tilde is a Webpack convention to indicate a module (which is not relative).

I am assuming that globals is not a subdirectory next to example.scss. But that gobals is somehow resolvable using resolve.root or resolve.fallback. In this case example.scss is absolutely correct for Webpack and not magic at all.

@craigcosmo does this relate to your problem?

[bholloway]

Sorry @le0nik I did not re-read the history of the conversation before making my last post and it simplistically ignores the crux of the issue.

I can't think why this would work like this. I am assuming that assets is not a directory within globals(?).

[bholloway]

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

[bholloway]

I'm going to close this ageing issue because we have a new version 3.0.0 which (e2e testing confirms) is much better.

Please open a fresh issue for any ongoing problems and link to this one as needed.

I'm not opposed to reopening this issue but certainly lets talk with respect to the new version.

[leecolarelli]

This is still an issue in v5.0.1 of mix. Trying to use sass in laravel 8 with tailwind, and i'm required to add the processCssUrls: false option.

[seyfer]

still having this issue with v3, laravel mix and tailwind, it is even worse, with v2 it was just a warning and the build worked and in v3 it is an error, the build fails.
tailwindlabs/tailwindcss#48