webpack.config.js

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let VueLoaderPlugin = require("vue-loader/lib/plugin");
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        filename: "bundle.js",
        path: path.resolve("./dist")
    },
    module: {
        rules: [
            {test:/\.js$/, use:"babel-loader",exclude:/node_modules/},
            {test:/\.css$/,use:["style.loader","css-loader"]},
            {test:/\.less$/,use:["style.loader","css-loader","less-loader"]},
            {test:/\.(jpg|png|gif|jpeg)/,use:"url-loader?limit=8192"},
            {test:/\.vue$/,use:"vue-loader"}

        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:"./src/index.html"
        }),
        new VueLoaderPlugin()
    ]
};

main.js

import Vue from "vue";
import App from "./App.vue";
console.log(App);
new Vue({
    render: (h)=>h(App)
}).$mount("-sharpapp");

App.vue

<template>
    <h1>
        <span>hello</span>
    </h1>
</template>
<script>
    export default {
        data() {
            return {}
        },
        methods: {},
        computed: {},
        components: {}
    }
</script>
<style scoped>
    span{
        color: -sharpff6700;
    }
</style>

the error in running npm run dev is as follows:

ERROR in ./src/App.vue
Module not found: Error: Can"t resolve "style.loader" in "D:\Git-vue\test-day6"
 @ ./src/App.vue 4:0-87
 @ ./src/main.js
 @ multi ./node_modules/_webpack-dev-server@3.1.7@webpack-dev-server/client?http://localhost:8080 ./src/main.js

is it okay to comment out the style tags in the App.vue file? What is it caused by?