bholloway/resolve-url-loader

resolve url loader can not operate: css error

Closed this issue · 13 comments

applemate commented

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 commented
le0nik commented

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 commented

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?

  • 👍6
bholloway commented
le0nik commented

@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 commented

@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 commented

I got it to work. I had to mention, that I was using webpack@2.10-beta.20. 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.

  • 👍1
bholloway commented

@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 commented

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 commented

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

bholloway commented

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 commented

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.

  • 👍7
seyfer commented

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

  • 👍1