Sass 全局变量和混合不工作
Sass global variables and mixins not working
我已经使用 Vue 3.2.33 和 Vite 2.9.5 建立了一个项目
当我尝试从任何 vue 组件访问任何全局变量或 mixin 时,出现未定义错误。在 scss 个文件中不会出现此问题。
导入本身似乎工作正常,因为其中的任何 css 规则都在工作。
vite.config.ts:
import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variables";',
},
},
},
});
src/styles/_variables.scss:
// breakpoints
$breakpoints: (
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px,
);
@mixin test {
border: 3px solid red;
}
使用示例:
<style scoped lang="scss">
@use 'sass:map';
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
@include test; // <- undefined
&--fluid {
max-width: 100%;
width: 100%;
}
}
$widths: (
'sm': 540px,
'md': 720px,
'lg': 960px,
'xl': 1140px,
'xxl': 1320px,
);
@each $breakpoint, $width in $widths {
@media (min-width: map.get($breakpoints, $breakpoint)) { // <- $breakpoints undefined
.container {
max-width: $width;
}
}
}
</style>
我已经设法“解决”了这个问题。事实证明,当我替换文件导入的所有 @use
规则时,sass 代码被正确导入并且有效。但这会产生一个新问题,因为 @import
规则不能放在 @use
之前,所以我不得不从配置中删除 additionalData
键并手动包含导入。
我已经使用 Vue 3.2.33 和 Vite 2.9.5 建立了一个项目
当我尝试从任何 vue 组件访问任何全局变量或 mixin 时,出现未定义错误。在 scss 个文件中不会出现此问题。
导入本身似乎工作正常,因为其中的任何 css 规则都在工作。
vite.config.ts:
import { fileURLToPath, URL } from 'url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)),
},
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@use "@/styles/variables";',
},
},
},
});
src/styles/_variables.scss:
// breakpoints
$breakpoints: (
"sm": 576px,
"md": 768px,
"lg": 992px,
"xl": 1200px,
"xxl": 1400px,
);
@mixin test {
border: 3px solid red;
}
使用示例:
<style scoped lang="scss">
@use 'sass:map';
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
@include test; // <- undefined
&--fluid {
max-width: 100%;
width: 100%;
}
}
$widths: (
'sm': 540px,
'md': 720px,
'lg': 960px,
'xl': 1140px,
'xxl': 1320px,
);
@each $breakpoint, $width in $widths {
@media (min-width: map.get($breakpoints, $breakpoint)) { // <- $breakpoints undefined
.container {
max-width: $width;
}
}
}
</style>
我已经设法“解决”了这个问题。事实证明,当我替换文件导入的所有 @use
规则时,sass 代码被正确导入并且有效。但这会产生一个新问题,因为 @import
规则不能放在 @use
之前,所以我不得不从配置中删除 additionalData
键并手动包含导入。