search

koluch / esbuild-plugin-sass

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

Import from node_modules #59

Closed JonnyVaine closed 2 years ago

JonnyVaine commented 2 years ago

I'm trying to convert my current webpack project to ESBuild, and my scss files import a stylesheet from a node module like this:

@import '~breakpoint-sass/stylesheets/breakpoint';

However, I get the following error message:

X [ERROR] [plugin sass] Can't find stylesheet to import. ╷ 1 │ @import '~breakpoint-sass/stylesheets/breakpoint.scss'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\Frontend\src\modules\Carousel\Carousel.scss 1:9 root stylesheet

src/Frontend/src/modules/Carousel/Carousel.js:7:7:
  7 │ import './Carousel.scss';
    ╵        ~~~~~~~~~~~~~~~~~

This error came from the "onResolve" callback registered here:

node_modules/esbuild-plugin-sass/index.js:100:14:
  100 │         build.onResolve({ filter: /.\.(scss|sass)$/, namespace: "file" }, async (args) => {
      ╵               ~~~~~~~~~

Do I need to setup an alias, or is there a way to enable this within the plugin?

stephenjwatkins commented 2 years ago

I was running into a similar issue for a component library in a yarn monorepo. I removed the ~ tilde prefix and adjusted my loadPaths in the SASS options to fix it.

sassPlugin({
  customSassOptions: {
    loadPaths: [path.join(__dirname, "../../node_modules")],
  },
})