Vite alias settings are not resolved

[aki77]

In the following cases,Can't find stylesheet to import errors will occur. Do you have any solutions?

@use '@/stylesheets/variables'

.App {
  color: variables.$main-color;
}

[activeguild]

Hi.I think it can be done by resolving the path with vite alias before parse to sass.

[activeguild]

It seems good to output the file read from the outside as a global, type definition.

[aki77]

It seems that the Vite css plugin solves this problem by passing the importer option to sass.

https://github.com/vitejs/vite/blob/6f696be112d5d0c3db433ae9cf0c73af078f2825/packages/vite/src/node/plugins/css.ts#L1038

[activeguild]

@aki77 Thank you. We have released the issue in response. Changed to use the set option for loading sass.

https://github.com/activeguild/vite-plugin-sass-dts/blob/44174bb3ddc7616415b5bec784fd6ee17fc6e160/example/vite.config.ts#L9-L23

[aki77]

Thanks! I got rid of the import error, but it seems that the d.ts is not created in my environment. I'll try to prepare a minimal reproduction environment when I have time.

[msakrejda]

Hi,

I think I'm running into a similar issue: I have a app/javascript/styles/global/index.scss that imports several other files:

@import "./invoice";
@import "./admin";
@import "./loggedout";

// and so on

This works fine with vite, but with vite-plugin-sass-dts, I get errors like

e :>>  Error: Can't find stylesheet to import.
  ╷
1 │ @import "./invoice";";
  │         ^^^^^^^^^^^^^^^^^^^^^^
  ╵
  stdin 1:9  root stylesheet
    at Object._newRenderError (/home/maciek/code/project/node_modules/sass/sass.dart.js:2203:19)
    at Object._wrapException (/home/maciek/code/project/node_modules/sass/sass.dart.js:2023:16)
    at StaticClosure._renderSync (/home/maciek/code/project/node_modules/sass/sass.dart.js:2000:18)
    at Object.Primitives_applyFunction (/home/maciek/code/project/node_modules/sass/sass.dart.js:6527:30)
    at Object.Function_apply (/home/maciek/code/project/node_modules/sass/sass.dart.js:13854:16)
    at _callDartFunctionFast (/home/maciek/code/project/node_modules/sass/sass.dart.js:15560:16)
    at /home/maciek/code/project/node_modules/sass/sass.dart.js:15538:18
    at parseCss (/home/maciek/code/project/node_modules/vite-plugin-sass-dts/dist/css.js:9:42)
    at async /home/maciek/code/project/node_modules/vite-plugin-sass-dts/dist/main.js:23:29 {
  formatted: "Error: Can't find stylesheet to import.\n" +
    '  ╷\n' +
    '1 │ @import "./invoice";";\n' +
    '  │         ^^^^^^^^^^^^^^^^^^^^^^\n' +
    '  ╵\n' +
    '  stdin 1:9  root stylesheet',
  line: 1,
  column: 9,
  file: 'stdin',
  status: 1
}

Are relative imports like this not supported? Also, we have several custom aliases added to our Vite config via

import { resolve } = from 'path';
export default defineConfig({
  resolve: {
    alias: {
      "components": resolve(__dirname, "app/javascript/components'"),
      "types": resolve(__dirname, "app/javascript/types"),
      // and so on
    }
  },

Is duplicating all the relevant aliases in importer the best solution?

[activeguild]

@uhoh-itsmaciek

Hi, thanks contact. Please wait for confirmation.

[activeguild]

@uhoh-itsmaciek

Must be passed with an absolute path when compiling with scss. Specify the file location with an absolute path in the importer as shown below. There was a bug when additonalData wasn't set, so I've fixed it and released 1.1.3. Please get the latest version. Sorry.

importer(...args) {
  const reg = new RegExp(`\\./(invoice)($|\\?)`);
  if (!reg.test(args[0])) {
    return;
  }
  return {
    file: `${path.resolve(
       _dirname,
      "./src/invoice.scss"
    )}`,
   };
},

[activeguild]

The issue has no movement, so close it.