Skip to content

Support for Webpack resolve aliases #46

Closed
@mjc-gh

Description

@mjc-gh

Is it possible to support webpack resolve aliases?

I prefer to use alias rather than have to import off relative paths.

Activity

guoerwei

guoerwei commented on Feb 22, 2017

@guoerwei

+1

moorthy-g

moorthy-g commented on Mar 14, 2017

@moorthy-g

Yes, It'd be helpful

tyler-dot-earth

tyler-dot-earth commented on Mar 14, 2017

@tyler-dot-earth

You can achieve resolve aliases except for composes via this method of using a PostCSS import plugin which supports aliases.

Haven't looked into trying to get composes working with the same aliases though (i.e. so those still have to ../be/relative/imported.css)

impssngr

impssngr commented on Mar 19, 2017

@impssngr

You can just use postcss plugin 'postcss-import' and configure it for resolving your modules in postcss.config.js:

const path = require('path')

const importLoader = require('postcss-import')({
  extension: '.scss', // default is '.css'
  resolve: (id) => {
    if (id === 'MyCSSVariables') return path.resolve(__dirname, './path/to/your/file.scss');
    return id;
  },
});

module.exports = {
  plugins: [importLoader],
};

and then use it like that:

@import "MyCSSVariables"

in every file that needs access to the variables

Hope it helps!

toc777

toc777 commented on Jun 9, 2017

@toc777

Is there any plan to work on this? I'd love to use this plugin over react-css-modules but I use a lot of webpack aliases. Is it possible to use the babel module resolver instead of require.resolve? If so, I could potentially use another babel-resolver plugin to set up the aliases.

gajus

gajus commented on Jun 10, 2017

@gajus
Owner

No plans to support custom resolve paths.

moimikey

moimikey commented on Jun 28, 2017

@moimikey

bit of a terrible blocker to be honest... what's it take for a contributor to add support for this? is it feasible/possible?

danny-andrews

danny-andrews commented on Jul 20, 2017

@danny-andrews

@moimikey I'd recommend switching over to using css-modules directly via the https://github.com/webpack-contrib/css-loader. It works fine with webpack aliases.

CoralSilver

CoralSilver commented on Jul 31, 2017

@CoralSilver

I'd like support for this as well if possible.

moimikey

moimikey commented on Aug 1, 2017

@moimikey

@danny-andrews went right above my head. thanks.

bhavyaw1

bhavyaw1 commented on Sep 7, 2017

@bhavyaw1

+1

Is there any plan to support this?

gneu77

gneu77 commented on Nov 27, 2017

@gneu77

@gajus you wrote "No plans to support custom resolve paths". Does this just mean you don't plan to support the webpack resolve aliases (which I could totally understand), or do you even mean you don't plan to add an alias option for babel-plugin-react-css-modules on its own?

gajus

gajus commented on Nov 27, 2017

@gajus
Owner

Does this just mean you don't plan to support the webpack resolve aliases (which I could totally understand)

This.

Don't understand the second part of the question.

gneu77

gneu77 commented on Nov 27, 2017

@gneu77

I mean you could feature a resolve option like this for config in babelrc:
['babel-plugin-react-css-modules', { 'generateScopedName': '[name]---[local]---[hash:base64:5]', 'resolve': { '@styles': path.resolve(__dirname, 'src/styles') } }]

Currently, I have a lot of imports like this:
import colors from '../../../../../../styles/colors.css'
and I'd be really happy to somehow replace them by e.g.:
import colors from '@styles/colors.css'

gajus

gajus commented on Nov 27, 2017

@gajus
Owner

Currently, I have a lot of imports like this:
import colors from '../../../../../../styles/colors.css'
and I'd be really happy to somehow replace them by e.g.:
import colors from '@styles/colors.css'

I would not support this either.

Doing this is just asking for a trouble.

It is perfectly normal to have multiple levels of nesting in a project. The particular example (../../../../../../) seems a bit excessive, but thats a problem with the project's file tree structure. Adding aliases is just a workaround disguising the underlying problem.

Besides, you can easily add the suggested feature with a separate babel plugin. It does not need to be part of babel-plugin-react-css-modules.

AndreasCag

AndreasCag commented on Aug 19, 2018

@AndreasCag
Contributor

Just add babel-plugin-module-resolver and you can easily achieve this feature.

module.exports = {
  ...
  "plugins": [
    ...
    ["module-resolver", {
      "alias": {
        "@": path.join(__dirname, 'src'),
      }
    }]
  ],
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @mjc-gh@moimikey@moorthy-g@tyler-dot-earth@gajus

        Issue actions

          Support for Webpack resolve aliases · Issue #46 · gajus/babel-plugin-react-css-modules