You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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 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?
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'
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.
Activity
guoerwei commentedon Feb 22, 2017
+1
moorthy-g commentedon Mar 14, 2017
Yes, It'd be helpful
tyler-dot-earth commentedon Mar 14, 2017
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
)composes: x from 'path';
not working. #43impssngr commentedon Mar 19, 2017
You can just use postcss plugin 'postcss-import' and configure it for resolving your modules in
postcss.config.js
:and then use it like that:
@import "MyCSSVariables"
in every file that needs access to the variables
Hope it helps!
toc777 commentedon Jun 9, 2017
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 commentedon Jun 10, 2017
No plans to support custom resolve paths.
moimikey commentedon Jun 28, 2017
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 commentedon Jul 20, 2017
@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 commentedon Jul 31, 2017
I'd like support for this as well if possible.
moimikey commentedon Aug 1, 2017
@danny-andrews went right above my head. thanks.
bhavyaw1 commentedon Sep 7, 2017
+1
Is there any plan to support this?
gneu77 commentedon Nov 27, 2017
@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 commentedon Nov 27, 2017
This.
Don't understand the second part of the question.
gneu77 commentedon Nov 27, 2017
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 commentedon Nov 27, 2017
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 commentedon Aug 19, 2018
Just add babel-plugin-module-resolver and you can easily achieve this feature.