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 下： p>

我什至尝试将导入更改为

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

这是我的 sass-loader 的 webpack 配置

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

Answer 1

您的文件名是“styles”而不是“style”。

尝试上面列出的三个文件路径选项之一。我很确定 @import '/styles.scss'; 或 @import '../styles.scss'; 应该适合你。