New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

resolve url loader can not operate: css error #28

Closed
craigcosmo opened this Issue Jul 17, 2016 · 11 comments

Comments

Projects
None yet
3 participants
@craigcosmo
Copy link

craigcosmo commented Jul 17, 2016

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

This comment has been minimized.

Copy link
Owner

bholloway commented Jul 17, 2016

@le0nik

This comment has been minimized.

Copy link

le0nik commented Aug 15, 2016

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

This comment has been minimized.

Copy link

le0nik commented Aug 15, 2016

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

This comment has been minimized.

Copy link
Owner

bholloway commented Aug 15, 2016

@le0nik

This comment has been minimized.

Copy link

le0nik commented Aug 15, 2016

@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

This comment has been minimized.

Copy link
Owner

bholloway commented Aug 16, 2016

@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

This comment has been minimized.

Copy link

le0nik commented Aug 16, 2016

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.

@bholloway

This comment has been minimized.

Copy link
Owner

bholloway commented Oct 13, 2016

@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

This comment has been minimized.

Copy link
Owner

bholloway commented Oct 13, 2016

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(?).

knowler added a commit to roots/sage-installer that referenced this issue Jul 18, 2018

Add Tailwind webpack.config.preset.js
This "fixes" a known issue when using Tailwind with Sass
(bholloway/resolve-url-loader#28). It removes the `resolve-url-loader`
from the loaders for SCSS files and disables source maps. Without this
change there would be a persistent warning when running `yarn start`.

This change requires a change to the webpack.config.js in roots/sage.
The final export needs to be:

```
module.exports = merge.smartStrategy({
  'module.loaders': 'replace'
})(webpackConfig, desire(`${__dirname}/webpack.config.preset`));
```
@bholloway

This comment has been minimized.

Copy link
Owner

bholloway commented Aug 19, 2018

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

@bholloway

This comment has been minimized.

Copy link
Owner

bholloway commented Sep 14, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment