我正在尝试使用vue-cli 3.x，typescript，pug和.sass文件设置Vue项目 .

我还想全局导入一些文件，以便它们在我的所有组件中都可用（I followed this guide）

main.ts

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'
import './registerServiceWorker'
import '@/sass/main.sass'

main.sass

@import partials/variables
@import ../../node_modules/globl.css/main

vue.config.js

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `
                    @import "@/sass/partials/_variables.sass";
                    @import "./node_modules/globl.css/partials/_mixins.sass";
                `
            }
        }
    }
}

Navbar component giving me errors

<template lang="pug">
.navbar Navbar
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>

<style lang="sass">
.navbar 
    color: red
</style>

Error log

enter image description here

我注意到，如果我从组件中删除sass并将其转换为scss，则错误消失...

另一个问题，在main.sass文件中，对我来说仍然是个谜 .

vue.js webpack sass vuejs2 vue-cli-3