search

koluch / esbuild-plugin-sass

Plugin for esbuild to support SASS styles
45 stars 15 forks source link

Unable to resolve relative paths inside node_modules #15

Closed Markcial closed 2 years ago

Markcial commented 3 years ago

Hi, great work.

I tried your plugin in a legacy project which uses a lot of relative imports from node modules. The plugin fails to load those imports. It could be easily solved by replacing the regular load here https://github.com/koluch/esbuild-plugin-sass/blob/main/index.ts#L24 and use the require API https://nodejs.org/api/modules.html#modules_require_resolve_request_options I tried that and works

EDIT: if you want to reproduce the tests you can write a build with bundle option and the sass plugin with this npm package included https://www.npmjs.com/package/bootstrap-scss#quick-start.

And create the entrypoint file with this content:

import "bootstrap-scss/bootstrap.scss";

Then you can try the changes between the path resolve and the require one.

I can work out a PR if you want it, just let me know

58bits commented 3 years ago

I also bumped into this using the material-components-web package https://github.com/material-components/material-components-web. I can create node_modules specific imports like - @use "../../../node_modules/@material/theme" - but within the material components themselves, there are additional @forward, @use, @import statements that will not resolve.

AntouanK commented 3 years ago

@Markcial can you please write an example of how you solved this? I have the same issue with a 3rd party component library, that uses ~@... to import some scss file. Can I somehow replace ~ with the node_modules path?

koluch commented 2 years ago

Hi Markcial,

Thans for your feedback! I solved this issue, but only for the case when Sass file is imported from JS file. As for the case of importing from Sass file, it is not a default and expected Sass behaviour and should be implemented manually, using customSassOptions plugin parameters and custom Sass importer