Cannot import CSS from node_modules using "~" pattern

[ashubham]

Describe the bug

@import '~npm_package/path/file.scss';

// styles here

Throws error:

Error: Can't find stylesheet to import.

This seems related to #291 . But the problem here is when a ~ is prefixed.

System Info

• required vite version: 0.20.7
• required Operating System: OSX
• required Node version: 12.11.0

Logs (Optional if provided reproduction)

Error: Can't find stylesheet to import.
  ╷
1 │ @import '~@bootstrap/styles/_base.scss';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../js/ts-packages/radiant-react/widgets/alert/muted/muted-alert.scss 1:9  root stylesheet
    at Object._newRenderError (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart.js:14477:19)
    at Object._wrapException (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart.js:14324:16)
    at StaticClosure._renderSync (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart.js:14299:18)
    at Object.Primitives_applyFunction (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart

[m4rvr]

What should ~ or @ refer to? I don't think this works without a defined alias.

[ashubham]

@MarvinRudolph Updated the description to make it clearer, basically ~ resolves with node_module resolution algorithm to find the nearest package.

[DJ-991]

Unsubscribe

…

On 11-Jun-2020, at 4:55 AM, Ashish Shubham ***@***.***> wrote: Do NOT ignore this template or your issue will have a very high chance to be closed without comment. Describe the bug @import ***@***.***/path/file.scss'; // styles here Throws error: Error: Can't find stylesheet to import. This seems related to #291 . But the problem here is when a ~ is prefixed. System Info required vite version: 0.20.7 required Operating System: OSX required Node version: 12.11.0 Logs (Optional if provided reproduction) Error: Can't find stylesheet to import. ╷ 1 │ @import ***@***.***/radiant-styles/_base.scss'; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ ../js/ts-packages/radiant-react/widgets/alert/muted/muted-alert.scss 1:9 root stylesheet at Object._newRenderError (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart.js:14477:19) at Object._wrapException (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart.js:14324:16) at StaticClosure._renderSync (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart.js:14299:18) at Object.Primitives_applyFunction (/Users/ashish.shubham/thoughtspot/blink-v2/node_modules/sass/sass.dart — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[yyx990803]

@AXWELL911 please unwatch this repo, don’t spam everyone with unsubscribe emails.

[yyx990803]

~ is a convention alias configured in vue-cli. There’s no such thing in Vite.

[zzetao]

Hi, You can use @modules/npm_package_name.

[jameshulse]

I found this issue as I made the same mistake. In vite it is simply @import 'npm_package/path/file.scss' without any extra prefix like ~.

[vesper8]

Is there a way to set it up so that it continues to work with vue-cli but also works with vite?

I tried adding an alias in vite.config.js but no luck so far

[cypressious]

It would be nice to have a way to configure this in vite to make migration from vue-cli projects easier.

In the meantime, an ugly workaround is to define aliases for each library

resolve: {
    alias: {
        '~bulma': 'bulma',
        '~buefy': 'buefy',
    }
}

[yee94]

Add this config to vite.config.js

   resolve: {
      alias: [
        {
          find: /^~.+/,
          replacement: (val) => {
            return val.replace(/^~/, "");
          },
        },
      ],
    },

[tomocrafter]

@xiaobebe alias's replacement takes string rather than function. therefore it occurs type error.
and also tried replacement: "" but doesn't make @import "~something" work properly like webpack.

[he8us]

I use the following config for an Electron Project I use. It seems to work perfectly:

• @/components/Loading resolve to my src/renderer/components/Loading
• ~bootstrap resolves to node_modules/bootstrap
• ~@blueprintjs to node_modules/@blueprintjs`

  resolve: {
    alias: [
      {
        find: /~(.+)/,
        replacement: join(process.cwd(), 'node_modules/$1'),
      },

      {
        find: /@\//,
        replacement: join(process.cwd(), './src/renderer') + '/',
      },
    ],
  },