importing 'additionalPaths'?

[GabrielMahan]

I'm trying to import some shared scss files stuck in my old app/assets dir, (my sourceCodeDir is app/javascript)

I see in the migration guide that to reference code outside the sourceCodeDir we should add the additional paths with a glob, so in my vite.json I've added

"watchAdditionalPaths": [
  "app/assets/**/*"
]

How do we reference these files in a vue component? In particular in the stylesheet?

When I try something like the following in a vue component

<style lang="scss">
// @import '~/app/assets/stylesheets/shared.scss'; ??? 
</style> 

it looks that the path is still resolving to my app/javascript folder

[ElMassimo]

Hi Gabriel!

As it's mentioned in the Aliases section of the docs, the ~ prefix is an alias to your sourceCodeDir, which in your case is app/javascript.

You have a few options to reference an outside file:

• Using relative paths: 👎 error-prone and breaks if you move the file
• Using relative paths with the root alias as in ~/../assets: 👎 harder to understand
• Adding an alias in vite.config.ts ✅

I'd recommend adding an alias in your vite.config.ts:

import { resolve } from 'path'
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@assets': resolve(__dirname, 'app/assets'),
    },
  },

There is a very similar alias being used in this example setup.

I think this is common enough that it might be worth mentioning it in the docs. Let me know if that helps!

[ElMassimo]

Documented this in watchAdditionalPaths, and cross-linked to it from the Import Aliases section.

[GabrielMahan]

@ElMassimo thank you! Your response was super clear and very helpful! You've saved me a lot of headaches!!