1. Feedback
  2. Vue
  3. 34553

Welcome to the Vue feedback portal. We’re happy you’re here! If you have feedback on how to improve the Vue, we’d love to hear it!

  • Check out the features or bugs others have reported and vote on your favorites. Feedback will be prioritized based on popularity.
  • If you have feedback that’s not listed yet, submit your own.

Thanks for joining our community and helping improve Syncfusion products!

1
Vote

Relative SCSS includes fail in Vue3 + Vite

My current setup works fine with JS imports but when I try to import parts instead of everything all at once from the ej2 package I am getting constant import errors.


+-- @syncfusion/[email protected]
+-- @syncfusion/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- @vitejs/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]


My HomeView.vue includes nothing more than the following:

<style lang="scss">
@import "../../node_modules/@syncfusion/ej2/bootstrap5.scss";
</style>

The following two imports also work perfectly until they reach the base/bootstrap5.scss file.
<style lang="scss">
@import "@syncfusion/ej2/bootstrap5.scss";
</style>

<style lang="scss">
@import "node_modules/@syncfusion/ej2/bootstrap5.scss";
</style>

The error is constantly the same as seen in the screenshot.
It looks like it tries to access the es2-base from inside the ej2/base/bootstrap5.scss file. If you use 'relative' logic and pathfinding that would mean it will be looking into es2/base/es2-base/styles/bootstrap5.scss which naturally isn't there, is't two levels up.

My Vite config is as follows:
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@node': path.resolve(__dirname, 'node_modules'),
    }
  },
  server: {
    watch: {
      usePolling: true
    }
  }
})


I was kind of hoping to kick star this project as one of the sales reps promised Vue 3 stability but I've been bumping into nothing but errors all night... To be fair, what works works very good and looks nice!