problem description

when the project was running, the following error occurred, that is, the cnpm run dev Times was wrong

 ERROR  Failed to compile with 1 errors                                                                                     17:36:12

This dependency was not found:

* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-5c8289c0","scoped":true,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector?type=styles&index=0!./card.vue in ./src/components/card.vue

To install it, you can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/style-compiler/index?{"vue":true,"id":"data-v-5c8289c0","scoped":true,"hasInlineConfig":false}!less-loader?{"sourceMap":true}!../../node_modules/_vue-loader@13.7.3@vue-loader/lib/selector?type=styles&index=0!./card.vue

the environmental background of the problems and what methods you have tried

the error type seems to lack vue-loader, but rerun after adding vue-loader to the project still reports this error.
my installation command: cnpm install vue-loader vue-html-loader css-loader style-loader file-loader-
-save-dev

my project structure:

what result do you expect? What is the error message actually seen?

just eliminate this mistake. I hope the boss who knows the problem will let me know. Thank you.

card.vue Code

<script>
import { actions } from "../store";

export default {
    vuex: {
        actions: actions,
        getters: {
            user: ({ user }) => user,
            filterKey: ({ filterKey }) => filterKey
        }
    },
    methods: {
        onKeyup (e) {
            this.search(e.target.value);
        }
    }
};
</script>

<template>
<div class="card">
    <header>
        <img class="avatar" width="40" height="40" :alt="user.name" :src="user.img">
        <p class="name">{{user.name}}

    </header>
    <footer>
        <input class="search" type="text" placeholder="search user..." @keyup="onKeyup | debounce 150">
    </footer>
</div>
</template>

<style scoped lang="less">
.card {
    padding: 12px;
    border-bottom: solid 1px -sharp24272C;

    footer {
        margin-top: 10px;
    }

    .avatar, .name {
        vertical-align: middle;
    }
    .avatar {
        border-radius: 2px;
    }
    .name {
        display: inline-block;
        margin: 0 0 0 15px;
        font-size: 16px;
    }
    .search {
        padding: 0 10px;
        width: 100%;
        font-size: 12px;
        color: -sharpfff;
        height: 30px;
        line-height: 30px;
        border: solid 1px -sharp3a3a3a;
        border-radius: 4px;
        outline: none;
        background-color: -sharp26292E;
    }
}
</style>

store.js Code

 /**
 * Vuex
 * http://vuex.vuejs.org/zh-cn/intro.html
 */
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const now = new Date();
const store = new Vuex.Store({
    state: {
        // 
        user: {
            name: "coffce",
            img: "images/1.jpg"
        },
        // 
        sessions: [
            {
                id: 1,
                user: {
                    name: "",
                    img: "images/2.png"
                },
                messages: [
                    {
                        content: "HelloVue + Vuex + WebpackchatlocalStorge, Github Issue",
                        date: now
                    }, {
                        content: ": https://github.com/coffcer/vue-chat",
                        date: now
                    }
                ]
            },
            {
                id: 2,
                user: {
                    name: "webpack",
                    img: "images/3.jpg"
                },
                messages: []
            }
        ],
        // 
        currentSessionId: 1,
        // key
        filterKey: ""
    },
    mutations: {
        INIT_DATA (state) {
            let data = localStorage.getItem("vue-chat-session");
            if (data) {
                state.sessions = JSON.parse(data);
            }
        },
        // 
        SEND_MESSAGE ({ sessions, currentSessionId }, content) {
            let session = sessions.find(item => item.id === currentSessionId);
            session.messages.push({
                content: content,
                date: new Date(),
                self: true
            });
        },
        // 
        SELECT_SESSION (state, id) {
            state.currentSessionId = id;
        } ,
        // 
        SET_FILTER_KEY (state, value) {
            state.filterKey = value;
        }
    }
});

store.watch(
    (state) => state.sessions,
    (val) => {
        console.log("CHANGE: ", val);
        localStorage.setItem("vue-chat-session", JSON.stringify(val));
    },
    {
        deep: true
    }
);

export default store;
export const actions = {
    initData: ({ dispatch }) => dispatch("INIT_DATA"),
    sendMessage: ({ dispatch }, content) => dispatch("SEND_MESSAGE", content),
    selectSession: ({ dispatch }, id) => dispatch("SELECT_SESSION", id),
    search: ({ dispatch }, value) => dispatch("SET_FILTER_KEY", value)
};