Recently, I decided to use vite for building a new vue application.
However, I encountered some difficulties when trying to globally import a stylus file in my vite.config.js.
I followed the code examples provided in the vite documentation:
export default defineConfig({
css: {
preprocessorOptions: {
styl: {
additionalData: `@import "./src/assets/styles/common.styl"`
}
}
}
})
Unfortunately, this approach did not work as expected.
Luckily, I found a workaround on a GitHub repository that solved my issue:
export default defineConfig({
css: {
preprocessorOptions: {
stylus: {
globals: {
'$highlight-color': 'red'
}
}
}
}
})
Although this solution is effective, I am still struggling to find a way to import a styl file globally. I attempted to add 'additionalData' to the working configuration but encountered multiple errors such as 'failed to locate file'. It seems like the system is trying to import the file into every .vue file but is having trouble locating it.
css: {
preprocessorOptions: {
stylus: {
additionalData: `@import "./src/assets/styles/common.styl";`,
globals: {
'$color-g1': '#F3F4FC',
'$color-white': '#FFFFFF',
}
}
}
}
Does anyone have any insights or ideas on how to tackle this issue?