Doesn't work with scss file #30

vimcaw · 2021-06-12T06:19:50Z

config:

import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

// https://vitejs.dev/config/
export default defineConfig(configEnv => ({
  plugins: [
    tsconfigPaths({ extensions: ['ts', 'tsx', 'scss', 'css'] }),
    ...
  ],
  ...
}));

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": "src"
  },
  "include": ["./src"]
}

I set baseUrl to src dir, and import some scss by @use 'style/color'(there is a file in /src/style/color.scss )

Everything works fine when I manually configure the alias, but when I use vite-tsconfig-paths it throws an error:

2:08:14 PM [vite] Internal server error: Can't find stylesheet to import.
  ╷
1 │ @use 'style/color';
  │ ^^^^^^^^^^^^^^^^^^
  ╵
  src/style/global.scss 1:1  root stylesheet
  Plugin: vite:css
  File: /Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/src/style/global.scss
  Error: Can't find stylesheet to import.
    ╷
  1 │ @use 'style/color';
    │ ^^^^^^^^^^^^^^^^^^
    ╵
    src/style/global.scss 1:1  root stylesheet
      at Object._newRenderError (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:13174:19)
      at Object._wrapException (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:13000:16)
      at _render_closure1.call$2 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:81147:21)
      at _RootZone.runBinary$3$3 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:27268:18)
      at _FutureListener.handleError$1 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:25818:19)
      at _Future__propagateToListeners_handleError.call$0 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:26116:49)
      at Object._Future__propagateToListeners (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:4539:77)
      at _Future._completeError$2 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:25948:9)
      at _AsyncAwaitCompleter.completeError$2 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:25602:12)
      at Object._asyncRethrow (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:4338:17)
2:08:14 PM [vite] Internal server error: Can't find stylesheet to import.
  ╷
1 │ @use 'style/color';
  │ ^^^^^^^^^^^^^^^^^^
  ╵
  src/style/override/formElementCommon.scss 1:1  @use
  src/style/override/index.scss 1:1              root stylesheet
  Plugin: vite:css
  File: /Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/src/style/override/formElementCommon.scss
  Error: Can't find stylesheet to import.
    ╷
  1 │ @use 'style/color';
    │ ^^^^^^^^^^^^^^^^^^
    ╵
    src/style/override/formElementCommon.scss 1:1  @use
    src/style/override/index.scss 1:1              root stylesheet
      at Object._newRenderError (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:13174:19)
      at Object._wrapException (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:13000:16)
      at _render_closure1.call$2 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:81147:21)
      at _RootZone.runBinary$3$3 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:27268:18)
      at _FutureListener.handleError$1 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:25818:19)
      at _Future__propagateToListeners_handleError.call$0 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:26116:49)
      at Object._Future__propagateToListeners (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:4539:77)
      at _Future._completeError$2 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:25948:9)
      at _AsyncAwaitCompleter.completeError$2 (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:25602:12)
      at Object._asyncRethrow (/Users/vimcaw/ProjectsAtWork/deep-loving-cloud-admin/node_modules/sass/sass.dart.js:4338:17)

The text was updated successfully, but these errors were encountered:

aleclarson · 2021-06-12T06:55:24Z

loose: true should do the trick, and you can omit the extensions option (which is only used for resolving an import specifier without an explicit extension).

vimcaw · 2021-06-12T08:50:01Z

Unfortunately, after setting loose: true and remove extensions, it still doesn't work and throw the same error.

aleclarson · 2021-06-12T18:07:17Z

~~Must be related to vitejs/vite#2683~~, so not an issue with this plugin.

edit: Oh I missed this part of that issue:

And this doesn't apply to SCSS.

I wonder, is the resolveId hook even called for @use statements of SCSS files?

MetaMmodern · 2021-12-17T21:21:36Z

Hi, @aleclarson . Maybe reopen this issue? I'm getting similar errors on my side. Trying to jump to vite from webpack.

aleclarson · 2021-12-18T00:25:46Z

If someone can reproduce this in the ./demo folder and link it here, that would be great

MetaMmodern · 2021-12-18T11:36:14Z

@aleclarson hi, yes, I've done a demo, it's here: https://github.com/MetaMmodern/vite-tsconfig-paths/tree/scss-test. Should I make a PR?

Btw, if I try to resolve with using just vite it kinda works, in a way that it does not throw errors, but my app looks like it hasn't downloaded styles..
Update2: the problem there was that my styles were in :global block. Seems webpack required it. I removed that top-level block and it started working with manual aliases, this plugin still does not work.

AlanBlanchetNeovision · 2022-09-21T12:30:13Z

Any updates ? I have this config

export default defineConfig({
 plugins: [react(), tsconfigPaths()],
 server: {
   port: 3000
 }
})

And I get this error :

[vite] Internal server error: [sass] Can't find stylesheet to import.
  ╷
1 │ @import "scss/env.scss";
  │         ^^^^^^^^^^^^^^^
  ╵
  src/components/App/index.module.scss 1:9  root stylesheet
  Plugin: vite:css

I found a workaround by manually adding paths to be resolved by vite.

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    port: 3000
  },
  resolve: {
    alias: {
      "scss": path.resolve(__dirname, "src/scss")
    }
  }
})

Thanks

aleclarson · 2022-10-20T16:14:35Z

This is an upstream bug in Vite.

The resolver used by sass doesn't include custom Vite plugins.

https://github.com/vitejs/vite/blob/f148c18460337fb798dbcc510a790dc50fb479f8/packages/vite/src/node/plugins/css.ts#L708-L714

aleclarson · 2022-10-20T16:55:07Z

Once this PR is merged, I have confirmed this will be fixed. (But you have to use loose: true)

vitejs/vite#10555

Thank you @MetaMmodern for the reproduction!

MetaMmodern · 2022-10-20T17:35:32Z

@aleclarson omg, it's been 10 month, thank you))

laudaikinhdi · 2023-02-15T10:20:32Z

@aleclarson I added loose: true but not working in SCSS

emosheeep · 2023-11-28T14:12:12Z

I was involved in trouble too…But for now, I’ve used a hack way to achieve what I want

const resolvePlugin = tsconfigPaths({
  // to support resolve alias in scss files(any other non-script files)
  loose: true, 
})

export default defineConfig({
  resolve: {
    alias: [
      {
        find: /(.*)/,
        replacement: '$1',
        async customResolver(source, importer, options) {
          // HACK: resolve ts alias in style files.
          if (importer && /\.scss/.test(importer)) {
            // @ts-ignore
            return await resolvePlugin.resolveId.call(
              this,
              source,
              importer,
              { skipSelf: true }
            );
          }
        },
      },
    ]
  }
})

aleclarson closed this as completed Jun 12, 2021

aleclarson reopened this Dec 18, 2021

This comment was marked as spam.

Sign in to view

aleclarson added the upstream bug Bug caused by a dependency label Oct 20, 2022

matthew-dean mentioned this issue May 31, 2023

Use resolve.alias to support .scss import resolution #116

Closed

emosheeep mentioned this issue Nov 28, 2023

[vite:css] Failed to find '@/norm.css' #41

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Doesn't work with scss file #30

Doesn't work with scss file #30

vimcaw commented Jun 12, 2021

aleclarson commented Jun 12, 2021

vimcaw commented Jun 12, 2021

aleclarson commented Jun 12, 2021 •

edited

MetaMmodern commented Dec 17, 2021

aleclarson commented Dec 18, 2021

MetaMmodern commented Dec 18, 2021 •

edited

This comment was marked as spam.

AlanBlanchetNeovision commented Sep 21, 2022

aleclarson commented Oct 20, 2022

aleclarson commented Oct 20, 2022 •

edited

MetaMmodern commented Oct 20, 2022

laudaikinhdi commented Feb 15, 2023 •

edited

emosheeep commented Nov 28, 2023 •

edited

Doesn't work with scss file #30

Doesn't work with scss file #30

Comments

vimcaw commented Jun 12, 2021

aleclarson commented Jun 12, 2021

vimcaw commented Jun 12, 2021

aleclarson commented Jun 12, 2021 • edited

MetaMmodern commented Dec 17, 2021

aleclarson commented Dec 18, 2021

MetaMmodern commented Dec 18, 2021 • edited

This comment was marked as spam.

AlanBlanchetNeovision commented Sep 21, 2022

aleclarson commented Oct 20, 2022

aleclarson commented Oct 20, 2022 • edited

MetaMmodern commented Oct 20, 2022

laudaikinhdi commented Feb 15, 2023 • edited

emosheeep commented Nov 28, 2023 • edited

aleclarson commented Jun 12, 2021 •

edited

MetaMmodern commented Dec 18, 2021 •

edited

aleclarson commented Oct 20, 2022 •

edited

laudaikinhdi commented Feb 15, 2023 •

edited

emosheeep commented Nov 28, 2023 •

edited