使用 Nuxt 3 和 Vite 高效添加全局 CSS
<p>我的项目中包含全局 sass，但我找不到将其添加到项目中的有效方法。</p>
<p>似乎有两种流行的方法可以在项目中添加 css。</p>
<pre class="brush:php;toolbar:false;">vite: {
plugins: [svgLoader()],
css: {
preprocessorOptions: {
scss: {
additionalData: `
@import "~/assets/styles/main.scss";
`,
},
},
},</pre>
<p>使用 vite 似乎可以工作，但它似乎也将自身注入到我使用的每个组件中，因此当我生成项目时，我可以看到我的 css 重复了多次，有些文件多达 300 次。该问题在 vites 端找到 https://github.com/vitejs/vite/issues/4448</p>
<pre class="brush:php;toolbar:false;">css: ["@/assets/styles/main.scss"],</pre>
<p>上面的选项似乎并没有对每个组件都执行此操作，但是 .vue 文件中的普通作用域 sass 不会在使用此方法进行编译时拾取 sass 变量和混合</p>
1
937
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
使用
additionalData将其添加到每个页面。该项目仅适用于 mixns 和 vars，它们在构建时不会转换为永久 css。基本上只在
additionalData中的mixins中使用vars，然后在css中使用你的global.scss