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
?
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}`)
}
There is already an open issue in the repo to track for any change.