research(ui): addressing Limitations with Dynamic SCSS Imports in Vite and Sass

[andypf]

Addressing Limitations with Dynamic SCSS Imports in Vite and Sass

Currently, there is a need to dynamically import all component-specific SCSS files into the global.scss file to streamline maintenance and avoid manual additions. However, there are significant challenges with achieving this using modern Sass and Vite configurations:

1. Using a Vite Plugin for Dynamic Import:

   • A Vite plugin can be implemented to dynamically import SCSS files using glob patterns.
   • This approach relies on the deprecated @import directive in Sass.

2. Deprecation of @import in Sass:

   • While the plugin works with @import, using this directive generates deprecation warnings.
   • Dart Sass plans to remove @import in version 3.0.0, making it an unsuitable long-term solution.

3. Limitations of @use with Dynamic Imports:

   • Switching to the recommended @use directive breaks the plugin’s functionality, as it does not respond to @use.
   • This means there is no immediate way to dynamically import SCSS files using @use.

4. Future Considerations:

   • There is hope that either Sass or Vite tooling will introduce a solution that supports dynamic imports with @use in the near future.
   • Until then, the only viable approach is to use @import and tolerate the deprecation warnings or manually maintain imports in global.scss.

import glob from "glob"

export default {
  css: {
    preprocessorOptions: {
      scss: {
        importer(url) {
          // Check for the wildcard import
          if (url === "./components/**/*.scss") {
            // Fetch all matching SCSS files using glob
            const files = glob.sync("./src/components/**/*.scss")

            // Generate `@use` statements with namespaces
            const contents = files
              .map((file) => {
                // Generate a unique namespace for each file based on its filename
                const namespace = file
                  .replace(/^.*[\\/]/, "") // Remove the path
                  .replace(/\.scss$/, "") // Remove the `.scss` extension
                  .replace(/[^a-zA-Z0-9]/g, "_") // Sanitize invalid characters for namespaces
                return `@use "${file}" as ${namespace};`
              })
              .join("\n")

            return { contents }
          }

          return null
        },
      },
    },
  },
}

global.scss

// DEPRECATED!
@import './components/**/*.scss';

Related PR

• fix(ui): fixes glob import of scss files #686