SassError: File to import not found or unreadable: style.scss

Question

I am trying to setup a vuejs project from scratch. I am getting this error when I import "style.scss" in the component. Here's the component ( Login.vue ) where I import the style.scss

<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>

Here is my folder structure. style.scss is under /src and the component Login.vue is under /src/views :

I even tried changing the import to

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

Here's my webpack configuration of sass-loader

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

Answer 1

Your file name is "styles" not "style".

Try one of those three file path options you listed above. I'm pretty sure either @import '/styles.scss'; or @import '../styles.scss'; should work for you.