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

Using webpack resolve.alias #571

Closed
Tux1 opened this Issue Jul 8, 2017 · 10 comments

Comments

Projects
None yet
7 participants
@Tux1

Tux1 commented Jul 8, 2017

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 Tux1 closed this Jul 8, 2017

@Tux1 Tux1 reopened this Jul 9, 2017

@Tux1

This comment has been minimized.

Tux1 commented Jul 9, 2017

Finally, I have not found the solution...

@Tux1

This comment has been minimized.

Tux1 commented Jul 15, 2017

Any suggestion ?

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Jul 17, 2017

@Tux1 Can your provide minimum reproducible test repo?

@RuBAN-GT

This comment has been minimized.

RuBAN-GT commented Nov 16, 2017

@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

This comment has been minimized.

Root-Core commented Dec 13, 2017

@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.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Feb 15, 2018

@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

This comment has been minimized.

wilsonpage commented Mar 30, 2018

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

@Oscar-ren

This comment has been minimized.

Oscar-ren commented Apr 13, 2018

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

@shiro

This comment has been minimized.

shiro commented Sep 3, 2018

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

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented Nov 27, 2018

Dupplicate #282

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