SassError: файл для импорта не найден или не читается: style.scss

Question

Я пытаюсь создать проект vuejs с нуля. Я получаю эту ошибку, когда импортирую "style.s css" в компонент. Вот компонент ( Login. vue), куда я импортирую style.s css

<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.s css находится под / sr c, а компонент Login. vue находится под / src / views :

Я даже попытался изменить импорт на

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

Вот моя конфигурация webpack sass-loader

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

Answer 1

Имя вашего файла - «стили», а не «стиль».

Попробуйте один из трех вариантов пути к файлу, которые вы указали выше. Я почти уверен, что вам подойдет @import '/styles.scss'; или @import '../styles.scss';.