Closed mlcohen closed 6 years ago
postcss-easy-import
is all about sugar resolving. webpack
has own resolver. Use postcss-import
directly instead.
Thanks for the quick response. Using postcss-import
makes sense. I figured I was overlooking something important 😊
For anyone who happens to come across this post and is trying to get postcss-import
to work with webpack, use postcss-import-webpack-resolver
. It works. Not difficult to setup. https://www.npmjs.com/package/postcss-import-webpack-resolver
Hi --
I'm working on a web app project that is making use of Webpack v3 and postcss. Webpack is configured to use the
postcss-loader
and postcss is configured to use thepostcss-easy-import
plugin. The problem I'm running into is thatpostcss-easy-import
doesn't work with webpack's alias resolve directive (https://webpack.js.org/configuration/resolve/#resolve-alias).My web app project's directory structure is setup like so:
In the webpack config, we setup a resolve mapping so that each child directory under
src/app/modules/
is aliased againstapp-[module]
. So, for instance,app-core
would resolve tosrc/app/modules/core
. (The justification for this is so that we don't have to deal with relative paths and it makes splitting the app's modules up into separate node modules easier when we partition the logic.) Aliases work fine for JavaScript files using babel, but when using the@import
directive within a CSS file that references another CSS in a module that aliases to one of the app's module folders, things fail. For example, if I have a CSS file namedtheme.css
in the directorysrc/app/modules/featureA
:This will cause webpack to output an error saying the module
app-theme/colors.css
could not be resolved from the/projects/web-app/src/app/modules/featureA
.Digging into the
postcss-easy-import
code, I see that the module'sresolve-module
logic only resolves againstnode_modules
andweb_modules
using theresolve
npm module (https://github.com/TrySound/postcss-easy-import/blob/master/lib/resolve-module.js#L15). If the logic could be updated such that some kind of optional hook/middleware/plugin could be provided to dynamically check against other module directories, that, I think, would help solve the problem I'm running into. An optional hook would allowpostcss-easy-import
to then work with different tools that have their own module resolving logic. This would also assure that thepostcss-loader
does not need to get involved to help supportpostcss-easy-import
resolve aliased modules, which it shouldn't have to do.Anyway, I wanted to raise the problem here to see if this all makes sense and that I'm not overlooking something important. Thoughts?