在我的Vue.js / Vite应用程序中使用@use 'sass:color'会导致通过additionalData导入的变量无法使用
P粉478445671
2023-08-17 14:44:11
<p>我正在使用Vue.js与Vitest和sass loader。</p>
<p>当我在内联的scss文件或组件中使用<code>@use 'sass:color'</code>时，它似乎会覆盖在<code>vite.config.ts</code>文件中设置的<code>css.preprocessorOptions.scss.additionalData</code>的变量。</p>
<p>问题在这里复现：https://stackblitz.com/edit/vitejs-vite-nk8yf5?file=src%2Fstyle%2Fsample.scss</p>
<p>供以后参考，设置如下：</p>
<p><strong>./src/style/vars.scss</strong></p>
<pre class="brush:php;toolbar:false;">$sample-var: red;</pre>
<p><strong>vite.config.js</strong></p>
<pre class="brush:php;toolbar:false;">import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "./src/style/vars.scss" as *;`,
},
},
},
});</pre>
<p><strong>./src/style/sample.scss</strong></p>
<pre class="brush:php;toolbar:false;">@use 'sass:color';
.sample-style {
color: $sample-var;
}</pre>
<p><strong>组件</strong>:</p>
<pre class="brush:php;toolbar:false;"><script setup>
</script>
<template>
<div class="sample-style">Hello sample style</div>
</template>
<style lang="scss" scoped>
@import '../style/sample.scss';
</style></pre>
<p>使用这段代码，我在<code>sample.scss</code>中的<code>$sample-var</code>得到<code>Undefined variable.</code>的错误。</p>
<p>然而，如果我注释掉<code>@use 'sass:color';</code>，它会按预期工作（我可以在我的组件文件中访问<code>$sample-var</code>）。</p>
<p>这里发生了什么？我如何正确地在我的组件样式中导入<code>sass:color</code>，同时使用<code>vite.config.js</code>中的<code>additionalData</code>使一组变量在全局范围内可访问？我对了解最佳实践很感兴趣。</p>
在组件的
<style>标签前，additionalData中定义的Scss代码会被添加。因此，Sass编译器最终处理的内容是：根据文档，当
sample.scss不包含任何@use语句时：这意味着上述代码的评估方式类似于：
@use "./src/style/vars.scss" as *; .sample-style { color: $sample-var; }然而，根据导入模块系统文件的文档（重点在于我）：
$sample-var是一个模块的成员，因此sample.scss无法访问$sample-var。