Css-loader: Cannot resolve 'images" module with enabled "modules" param

[dakiesse]

Hi! I have a webpack config:

module.exports = {
  entry: [
    'babel-polyfill',
    './src/index',
  ],

  resolve: {
    extensions: ['', '.js', '.jsx', '.json'],
    modulesDirectories: [
      'node_modules',
      'src',
    ],
    alias: {
      components: 'components',
      containers: 'containers',
      nav: 'nav',
    },
  },

  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: './dist/',
  },

  module: {
    loaders: [
      {
        test: /\.(jpg|gif|png|svg)$/,
        loader: 'url?name=[path][name].[ext]&limit=10000',
      },
      {
        test: /\.css$/,
        loaders: [
          'style',
          'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
          'postcss',
        ],
      },
    ],
  },
},

And, I have a module in the path: src/components/LeftPane/index.js.
The module imported a css file import classNames from './assets/style.css'
The css file have the string background: url(./logo.png).

Problem: Cannot resolve module 'logo.png' in /path//app-root/src/components/LeftPane/assets, but logo.png in the path.

I tried to change ./logo.png to other variants:
logo.png - cannot resolve
/logo.png - resolve (WTF?), but don't copy to dist
components/LeftPane/assets/logo.png - resolve and copy the logo.png to dist
../assets/logo.png - resolve and copy the logo.png to dist

How to make so that was resolved locally? (./logo.png)

[Wexcode]

.logo {
  background: url(../assets/logo.png)
}

or

.logo { /* put all your logo css in here */ }
.logo:global { background: url('./logo.png'); }

I ran into this problem as well. It seems like a bug to me because I don't think that changing url('./logo.png') to url('../assets/logo.png') shouldn't make a difference in how the filename is interpreted.

[alex-shamshurin]

I have the same issue, but it works only if module option is specified, otherwise cannot resolve

{
        test: /^((?!\.module).)*styl$/,
        loader: 'isomorphic-style-loader!css?importLoaders=1&!stylus?paths[]=node_modules&include css&resolve url'
      },
      {
        test: /\.module.styl/,
        loader: 'isomorphic-style-loader!css?modules&importLoaders=1&localIdentName=[path][local]___[hash:base64:5]!' +
        'stylus?paths[]=node_modules&include css&resolve url'
      },

I use stylus mixing to get font-face

ks-font-face( "Roboto", "Roboto/Roboto", normal, normal, formats: woff2 woff ttf)

Fonts are under app/fonts and it is in path

resolve   : {
    root      : [path.join(__dirname, '..', 'app')],
    fallback  : [
      path.join(__dirname, '..', 'app', 'images'),
      path.join(__dirname, '..', 'app', 'lib'),
      path.join(__dirname, '..', 'app', 'fonts')
    ],
    extensions: ['', '.js', '.jsx', '.css', '.styl', '.scss', 'woff', 'woff2', 'eot', 'ttf', 'wav' ,'ico'],
  },

But style-loader do not resolve it. It works only with relative paths

ks-font-face( "Roboto", "/../../../fonts/Roboto/Roboto", normal, normal, formats: woff2 woff ttf)

This is only when file imported with global namespace, without module option

UPDATE: With absolute path files are totally skipped by css-loader and are not copied to public/assets folder

[rudolfschmidt]

run into same issue. its sucks. cant work because of this!
and I see there still no solution since 2016. great work guys.

[alex-shamshurin]

Me too! It must be the first thing to resolve! I cannot make it work with postCSS import but I found a workaround for stylus and maybe sass (less). If specify module: true and import the file as local (I use special regexp for webpack - 'module' prefix) but inside file use :global scope it shoild work and find files inside 'url'

[mnpenner]

Please fix 😢 This has been plaguing me for over a year now.

[the-teacher]

@dakiesse
@mnpenner

Please try the option url

    url: false,

a config has to look like below:

{
  loader: 'css-loader',
  options: {
    modules: true,
    url: false,
    localIdentName: '[hash:base64:5]'
  }
}

Please let me know if it works. I'm not a maintainer, but would be nice to know just out of curiosity.

[spokospace]

A lot of thanks @the-teacher ! I had the same problem and your solution was resolve it! :)

[the-teacher]

From my practice it's better do not process files from node_modules and from your App with the only rule.

In my case I use 2 rules:

The first rule processes only components of my project

include: "/assets/components",

the 2nd one processes all other rules

exclude: "/assets/components",

    {
      test: /\.css$/,
      include: "/assets/components",
      use: [
        {
          loader: 'style-loader'
        },

        {
          loader: 'css-loader',
          options: {
            modules: true,
            importLoaders: 1,
            localIdentName: '[hash:base64:5]'
          }
        },

        {
          loader: 'postcss-loader'
        }
      ]
    },

    {
      test: /\.css$/,
      exclude: "/assets/components",
      use: [
        {
          loader: 'style-loader',
        },

        {
          loader: 'css-loader',
          options: {
            importLoaders: 1
          }
        },

        {
          loader: 'postcss-loader'
        }
      ]
    }

[alexander-akait]

Feel free to PR

[alexander-akait]

For PR:

• Need test aliases without modules
• With global mode
• With local mode
• Need fix https://github.com/webpack-contrib/css-loader/issues/571#issuecomment-365977186

[alexander-akait]

Fixed in master, release new major in near future