Svgs referenced in .scss files not being included in build
Closed this issue · 1 comments
Hey, I am using Nuxt 3 in ssr mode and I have a directory of svgs that are returning 404s on production because they are not being included in the build. They are being referenced dynamically from within a .scss file, so I'm guessing that its not including them as it doesn't read their explicit paths? Is there a way I can force the build to include these files?
My code structure is:
- assets
-- scss
--- icons.scss
-- svgs
--- icons
---- account.svg
---- calendar.svg
Then I am using a mixin to add the list of icons to essentially create my own icon library
$icon-types: account, calendar;
// Generate type classes
@each $type in $icon-types {
.icon-#{$type} {
background-color: currentColor; //default to text color
display: inline-block;
width: 1rem;
height: 1rem;
mask-repeat: no-repeat;
mask-size: contain;
mask-position: center;
mask-image: url('~/assets/svgs/icons/#{$type}.svg');
}
}
There are obviously more than two icons in the list but just using 2 to illustrate my point. Does anyone know how I can make sure these get added to the build?
Relevant package versions:
"devDependencies": {
"nuxt": "^3.6.0",
"postcss": "^8.4.24",
"sass": "^1.63.6",
"sass-loader": "^13.3.2",
"tailwindcss": "^3.3.2"
},
"dependencies": {
"vite-svg-loader": "^4.0.0"
}
Nuxt.config.js:
import svgLoader from 'vite-svg-loader'
...
...
vite: {
plugins: [svgLoader()],
css: {
preprocessorOptions: {
scss: {
additionalData: "@use '@/assets/scss/variables.scss' as *;",
},
},
},
optimizeDeps: {
include: ['fast-deep-equal'],
},
},
Marking as closed because these seems to have resolved itself - no idea why or what changed but I have icons on cloudflare now!