Imports from node_modules about esbuild-sass-plugin HOT 5 CLOSED

HI @58bits my plugin already uses resolve for sass imports

from esbuild-sass-plugin.

Hi @glromeo - thanks very much for taking the time to reply. I've tried updating sassPlugin settings as you've described above, but I'm still getting error: [sass-plugin] Can't find stylesheet to import

I'm new to esbuild, and so it's highly likely I've setup something incorrectly.

I've created a test repo here... https://github.com/58bits/esbuild-test

Can you see anything obviously wrong with this?

from esbuild-sass-plugin.

Hi - I've updated the test repo at https://github.com/58bits/esbuild-test

I've fixed up all @use statements, and changed the build directory and project structure. I'm also using the ~ syntax to specify material modules - and this works, but then there are sub modules, or dependencies that fail.

I'm only attempting to import one component - via src/styles/components/_year-select.scss

And I'm getting the following error:

 > src/index.js:1:7: error: [sass-plugin] Can't find stylesheet to import.
   ╷
23 │ @use '@material/feature-targeting/feature-targeting';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/select/_select-helper-text-theme.scss 23:1  @forward
  node_modules/@material/select/_index.scss 23:1                     @use
  src/styles/components/_year-select.scss 2:1                        @use
  src/styles/style.scss 3:1                                          root stylesheet
      1 │ import './styles/style.scss'

from esbuild-sass-plugin.

@58bits

According to https://github.com/material-components/material-components-web/tree/master/packages/mdc-select
you have to change your _year-select.scss to:

@use "../config/config" as *;

@use "~@material/list/mdc-list";
@use "~@material/menu-surface/mdc-menu-surface";
@use "~@material/menu/mdc-menu";
@use "~@material/select/styles";
@use '~@material/select';

.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor {
  background-color: $dashboard-panel-background-color;
}
...

then in build.js just use this setup for esbuild-sass-plugin:

  plugins: [sassPlugin({
    type: "style", 
    includePaths: [
      path.resolve(__dirname, "node_modules"),
    ] 
  })],

from esbuild-sass-plugin.

Oh that's fantastic. It's working. Thank you so much. path.resolve(__dirname, "node_modules"), what what I needed.

from esbuild-sass-plugin.