import url?

[mg]

Hi, Im trying to parse the LESS from the material-ui.com project and get the following error:

ERROR in multi main
Module not found: Error: Cannot resolve module 'www/material-ui.css' in /Users/mg/Documents/js/scaffold-web-rx
 @ multi main

ERROR in ./src/material-ui.less
Module parse failed: /Users/mg/Documents/js/scaffold-web-rx/node_modules/less-loader/index.js!/Users/mg/Documents/js/scaffold-web-rx/src/material-ui.less Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500');
| /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
| /**
 @ multi main

Heres my webpack config:

var webpack = require('webpack'),
    path    = require('path');

module.exports = {
    entry: './src/index.jsx',
    devtool: 'source-map',
    output: {
        path: path.join(__dirname, 'www'),
        filename: 'app.js'
    },
    resolve: {
        modulesDirectories: ['node_modules'],
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' },
            { test: /\.less$/, loader: 'less' },
            { test: /\.jsx$/, loader: 'jsx-loader?harmony&insertPragma=React.DOM' },
            { test: /\.js$/, loader: '6to5-loader'},
            { test: /\.(eot|woff)$/, loader: 'file' },
        ]
    }
};

and the materialui.

@import "~material-ui/src/less/scaffolding.less";
@import "~material-ui/src/less/components.less";

Do I need some special loader for url or is there something else going on here?

[jhnns]

Seems like a bug to me, but I don't know what the problem is. @sokra it's probably because webpack passes the preprocessed css-file (which is now a js-file) to less?

I've added a test-case to demonstrate that import urls are supported.

[sokra]

            { test: /\.less$/, loader: 'less' },

should be

            { test: /\.less$/, loader: 'style!css!less' },

[sokra]

but the material-ui stuff is buggy in another way: webpack-contrib/css-loader#24 (comment)

[mg]

Im skipping the style!css! part to try and find out what's bothering the less loader, since the faulty output from the less loader will just blow up the css loader, as per the css-loader#24 issue.

[sokra]

You can try

            { test: /\.less$/, loader: 'style!raw!less' },

[mg]

That seems to work, thanks!

So how does it work, is the raw loader simply consuming and ignoring errors from the less loader and spewing out whatever style string it can?

[sokra]

The css-loader parses the CSS for dependencies i. e. url(...) and @import. The raw-loader just return the raw string.

So you loose the image handling if you use the raw-loader instead of the css-loader...

[mg]

So Im probably loosing all the fonts then?

[mukeshsoni]

@mg were you able to load the fonts finally?

[sokra]

As workaround you could create a loader that fixes the css:

// css-fix-loader.js
module.exports = function(source) {
  this.cachable();
  return source.replace(/\};/g, "}");
};

module.loaders: [
  { test: /\.less$/, loaders: [
    "style-loader",
    "css-loader",
    require.resolve("./css-fix-loader.js"),
    "less-loader"
  ] }
]

[mukeshsoni]

That works. Thanks!

But some animations are missing from the compiled code, which is expected in this case, i guess.

Also, a small typo in your post - this.cacheable();