In my current VueJS project, I am implementing different color schemes and other customized features based on an environment variable. These configurations are stored in a separate repository that has been added as a submodule within the project structure:
- my-project
- the-submodule
- node_modules
- public
- src
To ensure functionality, I have included the following code snippet in my vue.config.js:
module.exports = {
chainWebpack: config => {
config.resolve.alias
.set('@theme', path.resolve('the-submodule/' + process.env.VUE_APP_THEME))
},
...
This configuration is then used within various files, such as plugins/vuetify.ts:
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import colors from '@theme/colors'
Vue.use(Vuetify)
export default new Vuetify({
theme: {
themes: {
light: {
...colors
}
}
}
})
Similarly, it is utilized in router/index.ts:
import texts from '@theme/texts'
...
router.afterEach((to) => {
Vue.nextTick(() => {
document.title = to.meta.title ? `${texts.appName} | ${to.meta.title}` : texts.appName
})
})
Although the code compiles and functions properly, compilation errors persist:
ERROR in /Users/sme/projects/aedifion-frontend/src/plugins/vuetify.ts(4,20):
4:20 Cannot find module '@theme/colors' or its corresponding type declarations.
2 | import Vue from 'vue'
3 | import Vuetify from 'vuetify/lib/framework'
> 4 | import colors from '@theme/colors'
| ^
5 |
6 | Vue.use(Vuetify)
7 |
ERROR in /Users/sme/projects/aedifion-frontend/src/router/index.ts(12,19):
12:19 Cannot find module '@theme/texts' or its corresponding type declarations.
> 12 | import texts from '@theme/texts'
| ^
The theme files are structured as follows:
the-submodule/some-theme/colors.tsimport { Colors } from '../types'
export default {
accent: '#288946',
error: '#e60046',
info: '#969196',
primary: '#007982',
secondary: '#96BE0D',
success: '#a0af69',
warning: '#fab450'
} as Colors
the-submodule/some-theme/texts.tsimport { Texts } from '../types'
export default {
appName: 'MyApp'
} as Texts
the-submodule/types.ts:
export interface Colors {
accent: string;
error: string;
info: string;
primary: string;
secondary: string;
success: string;
warning: string;
}
export interface Texts {
appName: string;
}
I have also created custom versions of .d.ts files within the-submodule for these types.
I have attempted various solutions to resolve these errors without success. How can I address these compilation issues effectively?
UPDATE:
A workaround that works involves explicitly mapping paths in the tsconfig.json:
{
"compilerOptions": {
"paths": {
"@/*": [
"src/*"
],
"@theme/*": [
"the-submodule/some-theme/*"
]
},
Therefore, the question remains: How can I configure path mappings in the tsconfig-json without needing to specify each subfolder like some-theme?