SassError：找不到或無法讀取要導入的文件：style.scss

Question

我正在嘗試從頭開始設置一個 vuejs 項目。 在組件中導入“style.scss”時出現此錯誤。 這是我導入 style.scss 的組件（ Login.vue ）

<template>
    <div class="container">
        <div class="card">
            <h1>This is login page</h1>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login"
    };
</script>

<style lang="scss">
    @import 'style.scss';
</style>

這是我的文件夾結構。 style.scss在/src下，組件Login.vue在/src/views下：

我什至嘗試將導入更改為

@import '/style.scss';    //and
@import '../style.scss';

這是我的 sass-loader 的 webpack 配置

{
    test: /\.scss$/,
    use: [
        'vue-style-loader',
        'css-loader',
        'sass-loader'
    ]
}

Answer 1

您的文件名是“樣式”而不是“樣式”。

嘗試上面列出的三個文件路徑選項之一。 我很確定@import '/styles.scss'; 或@import '../styles.scss'; 應該為你工作。