The webpack configuration in my vue.config.js file looks like this:
const path = require("path");
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'scss',
patterns: [
"./src/styles/global.scss"
]
},
configureWebpack: {
module: {
rules: [{
test: /\.svg$/,
loader: 'vue-svg-loader'
}]
}
}
}
}
With this setup, I can use styles defined in global.scss across all my Vue components without needing to import them explicitly.
However, I recently encountered an issue with the font paths defined in global.scss:
@font-face {
font-family: Averta-Bold;
src: url('../assets/fonts/averta/Averta-Bold.eot'); /* IE9 Compat Modes */
src: url('../assets/fonts/averta/Averta-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../assets/fonts/averta/Averta-Bold.woff2') format('woff2'), /* Super Modern Browsers */
url('../assets/fonts/averta/Averta-Bold.woff') format('woff'), /* Pretty Modern Browsers */
url('../assets/fonts/averta/Averta-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
}
After creating a nested folder within ./src/components called ./src/components/dashboard/ and adding components in the dashboard directory, the fonts could no longer be located or used properly. Changing the font URLs to include additional "../" would fix the issue for the new components but break others.
I attempted to use "@/assets/xxxxx" as absolute paths in global.scss, but that did not work. How can I properly add absolute paths in global.scss?