Css-loader: Using webpack resolve.alias

[Tux1]

Hi,
css-loader doesn't manage to resolve some file from path using webpack resolve.alias.
I saw that there is an option to create css-loader aliases with alias option. But is it possible to use directly webpack resolve.alias ?
It was perfectly working with webpack 1 and css-loader 0.26.0 but since I have updated my packages, it is broken.

.topbar-logo {
  width: 64px;
  height: 64px;
  background-image: url(~assets/images/logo.svg);
}

Webpack config:

{
  resolve: {
    alias: {
      pages: path.resolve(__dirname, 'src/pages'),
      components: path.resolve(__dirname, 'src/components'),
      constants: path.resolve(__dirname, 'src/constants'),
      actions: path.resolve(__dirname, 'src/actions'),
      reducers: path.resolve(__dirname, 'src/reducers'),
      utils: path.resolve(__dirname, 'src/utils'),
      assets: path.resolve(__dirname, 'src/assets'),
      scss: path.resolve(__dirname, 'src/assets/scss'),
    },
    extensions: ['.js', '.jsx', '.json'],
    modules: [
      path.resolve(__dirname, 'src'),
      path.resolve(__dirname, 'node_modules'),
    ],
  },
}

Log :

ERROR in ./node_modules/css-loader?{"sourceMap":true,"localIdentName":"[name]_[local]_[hash:base64:3]","modules":true,"minimize":false}!./node_modules/sass-loader/lib/loader.js!./src/components/SideBar/styles.scss
Module not found: Error: Can't resolve '~assets/images/logo.svg' in '/Users/toto1/MEGA/myProject/web/src/components/SideBar'
resolve '~assets/images/logo.svg' in '/Users/toto1/MEGA/myProject/web/src/components/SideBar'
Parsed request is a module
using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./src/components/SideBar)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./src/components/SideBar)
resolve as module
looking for modules in /Users/toto1/MEGA/myProject/web/src
using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./src)
using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./src/~assets/images/logo.svg)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg.jsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg.json doesn't exist
as directory
/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg doesn't exist
looking for modules in /Users/toto1/MEGA/myProject/web/node_modules
using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./node_modules)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./node_modules)
using description file: /Users/toto1/MEGA/myProject/web/package.json (relative path: ./node_modules/~assets/images/logo.svg)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg.js doesn't exist
.jsx
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg.jsx doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg.json doesn't exist
as directory
/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg doesn't exist
[/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg]
[/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg.js]
[/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg.jsx]
[/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg.json]
[/Users/toto1/MEGA/myProject/web/src/~assets/images/logo.svg]
[/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg]
[/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg.js]
[/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg.jsx]
[/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg.json]
[/Users/toto1/MEGA/myProject/web/node_modules/~assets/images/logo.svg]
@ ./node_modules/css-loader?{"sourceMap":true,"localIdentName":"[name]_[local]_[hash:base64:3]","modules":true,"minimize":false}!./node_modules/sass-loader/lib/loader.js!./src/components/SideBar/styles.scss 6:92384-92418
@ ./src/components/SideBar/styles.scss
@ ./src/components/SideBar/index.jsx
@ ./src/components/App/index.jsx
@ ./src/utils/routes.jsx
@ ./src/main.jsx
@ multi react-hot-loader/patch webpack-hot-middleware/client ./main.jsx

Thanks !

[Tux1]

Finally, I have not found the solution...

[Tux1]

Any suggestion ?

[alexander-akait]

@Tux1 Can your provide minimum reproducible test repo?

[RuBAN-GT]

@Tux1, @evilebottnawi, Hello! I have similar problem for webpack 3 aliases and last css-loader with modules mode. Did you find any solution for this issue?

My config has same view: https://gist.github.com/RuBAN-GT/ede72a6d56e8aeace34b16cccece7ab7

[Root-Core]

@RuBAN-GT it seems that you have missed the style extensions in you resolve config.
But it seems impossible to me to get the css-loader working with webpack.resolve.alias.

[alexander-akait]

@kud problem also

    resolve: {
      alias: {
        '~': `${SRC_DIR}`,
      }
    },

It could be great if I was directly able to do:

.test {
  composes: base from '~/file.css';
}

without having to define aliases for css-loader.

[wilsonpage]

Rolling back to 0.28.0 worked for me. Looks like a breaking change slipped into a patch release.

[Oscar-ren]

looks like you used css module, delete ~ will be ok

[shiro]

aliases break as soon as you try to use composes with an external module

[alexander-akait]

Dupplicate https://github.com/webpack-contrib/css-loader/issues/282