Css-loader: Resolving module path when @import

[CrlsMrls]

The documentation on css-loader says @import and url(...) are interpreted like require() and will be resolved by the css-loader. But I have an error when doing an @import.

This case fails:

@import "font-awesome/css/font-awesome.css";

ERROR in ./~/css-loader!./src/app/main.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./font-awesome/css/font-awesome.css

But this works

require("font-awesome/css/font-awesome.css");

I can't change it though, since this import is in a npm-managed package.

So does @import resolve module paths also? Is this related with #31?

I am using directly css-loader (and then style-loader) like in the Example config

[andreypopp]

You need to prefix it with ~:

@import "~font-awesome/css/font-awesome.css";

as by default webpack interprets @improt within CSS as local imports because that's how CSS works.

[CrlsMrls]

@andreypopp, yes that works, but I cannot modify that CSS file, it is managed by somebody else, and every time I would do a npm install it would be reset.

[andreypopp]

@carlos- that code you are using is simply not webpack compatible then. I'd suggest opening an issue in project's issue tracker and discuss possible webpack compat.

[CrlsMrls]

I believe this is a deeper problem, @import should behave as import

[eguneys]

I import a css file in node_modules directory:

/* app.scss */
@import "~todomvc-common/base.css";

This is my webpack config:

{
  test: /\.css$/,
  loader: = 'style-loader!css-loader?sourceMap!postcss-loader'
}

I get the following error:

http://192.168.56.103:8000/home/ubuntu/webdev/learn/react-isomorphic/node_modules/todomvc-common/base.css Failed to load resource: the server respon\
ded with a status of 404 (Not Found)

So when I build the project import "~todomvc-common/base.css is converted to this:

url(/home/ubuntu/webpack/learn/react-isomorphic/node_modules/todomvc-common/base.css)

Please help.

@andreypopp

[simonh1000]

I have a related issue. I want to use require('assets/MDB/css/mdb.css'); in my index.js and that css file (which I do not control) uses lines like

@font-face {
  font-family: "Roboto";
  src: url("../font/roboto/Roboto-Thin.woff2") format("woff2"), url("../font/roboto/Roboto-Thin.woff") format("woff"), url("../font/roboto/Roboto-Thin.ttf") format("truetype");
  font-weight: 200;
}

and these are causing webpack to fail with errors like

ERROR in ./~/css-loader!./src/assets/MDB/css/mdb.css
Module not found: Error: Cannot resolve 'file' or 'directory' ../font/roboto/Roboto-Thin.ttf in /home/sim/code/btsync/work/MPower-webpack/src/assets/MDB/css
 @ ./~/css-loader!./src/assets/MDB/css/mdb.css 6:54648-54689

the fonts are in
/home/sim/code/btsync/work/MPower-webpack/src/assets/MDB/font/roboto/...

[virtualfunction]

This is a major issue still - I found using @import fails because it doesn't resolve the font files relative to the location of the CSS/SCSS/SASS. However if I put font-awesome in my list of entry points it works. @import also seems to fail when using a remote https:// address - external https / http addresses probably shouldn't be resolved.

[kroko]

@virtualfunction

Use resolve-url-loader
Example for case without css modules

    {
      test: /\.(scss)$/,
      loader: (production || testing)
      ? ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!postcss-loader!resolve-url-loader?keepQuery!sass-loader?sourceMap')
      : `style-loader!css-loader?sourceMap!postcss-loader!resolve-url-loader?keepQuery!sass-loader?sourceMap`
    }

[alexander-akait]

/cc @michael-ciniawsky i think it is won't fixed and we can close issue, problems not in css-loader, it is problems in sass-loader see https://github.com/webpack-contrib/sass-loader#problems-with-url (also solution place here :smile: ). Btw, many popular frameworks and library have variables to change path - it is best solution for me (without spend time on resolve-url-loader).

Also

@import "font-awesome/css/font-awesome.css";

is not correct usage if your use import in sass this @import(font-awesome/css/font-awesome.css)"; interpreted as @import url(font-awesome/css/font-awesome.css); (try http://www.sassmeister.com/) in output file (it is just css import https://developer.mozilla.org/ru/docs/Web/CSS/@import) and css-loader think it is import (Do not use css extension in import directive into sass files if you don't know how it works :smile: ).

Right use @import "font-awesome/css/font-awesome"; (without .css extension). I spent a lot of time in stylelint in the study of non standard css syntaxes :sob:

[alexander-akait]

/cc @kroko @virtualfunction @simonh1000 @eguneys @carlos- please read comment above :smile:

[kroko]

@evilebottnawi Well I did not have any issues, just noted @virtualfunction how to fight his issue. Thanks anyways. 😄

@carlos- fyi, I just revisited webpack guide that i wrote for collegues and everything (font loading, vanilla css imports) is working, feel free to take a look at module.rules section in wepbapck.front.config.js.
without css modules (scss, css)
with css modules (scss, css) (ignore react part)