vue.jsvuetify.jsvuetify-loader

Change default vuetify-loader variables scss file path


I created a project using Vue CLI (with typescript support), and added Vuetify with vue add vuetify

This create a file tree like this:

project
 - public
 - node_modules
 - src
   - components
   - scss
     variables.scss
   - assets
   main.ts

But, I want to change this structure to use something like Clean Architecture. So, I have

project
 - public
 - node_modules
 - src
   - application
   - domain
   - infrastructure
   - web
     - components
     - assets
     - scss
       variables.scss
     main.ts

But if I do this, vuetify-loader no longer loads my variables.scss file. Based on the documentation, it looks like it only loads the path src/scss/variables.scss

Is there a way to change the default path to src/web/scss/variables.scss?


Solution

  • vue-cli-plugin-vuetify appears to be hard-coded to expect that structure:

    for (const ext of ['sass', 'scss']) {
        const path = `${folder}/${file}.${ext}`
    
        // If file doesn't exist in user
        // project, continue to next
        if (!fileExists(api, `src/${path}`)) continue
    
        // If file exists, push it into
        // the import statement
        data.push(`@import '@/${path}${end}`)
      }
    

    Source

    There is already an open issue in the repo to track for any change.