Change default vuetify-loader variables scss file path

Question

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?

score 0 · Accepted Answer · answered Jul 28 '20 at 03:30

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.

Change default vuetify-loader variables scss file path

1 Answers1