Efficiently add global CSS using Nuxt 3 and Vite
<p>I have global sass included in my project, but I can't find an efficient way to add it to my project. </p>
<p>There seem to be two popular ways to add css to your project. </p>
<pre class="brush:php;toolbar:false;">vite: {
plugins: [svgLoader()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "~/assets/styles/main.scss";
`,
},
},
},</pre>
<p>Using vite seems to work, but it also seems to inject itself into every component I use, so when I build the project I can see my css repeated multiple times, some files up to 300 Second-rate. The issue was found on the vites side https://github.com/vitejs/vite/issues/4448</p>
<pre class="brush:php;toolbar:false;">css: ["@/assets/styles/main.scss"],</pre>
<p>The above options don't seem to do this for every component, but normal scoped sass in .vue files does not pick up sass variables and mixins when compiling with this method</p>