快来人啊，愁死我了，为什么vue中的样式没有效果

Question

在vue文件中写的样式没有生效是怎么回事？
demo.js

import Vue from "vue";
import buttonDemo from "./components/button-demo.vue";
// import './assets/styles/demo.css';
new Vue({
    el:"#demo",
    components:{
        buttonDemo:buttonDemo
    },
    template:"<buttonDemo/>"
})

button-demo.vue

<template>
  <input type="button" class="button" v-on:click="show()">
</template>

<script> // import '../assets/styles/demo.css';
export default {
    name: "button-demo",
    data: function(){
        return {text : IS_PROD_ENV};
    },
    methods:{
        show: function(){
            alert(this.text);
        }
    }
} </script>

<style scoped> .button{
    background-color: red;
    width:50px;
    height: 20px;
} </style>

webpack配置

 {
                test: /.css$/,
                sideEffects:true,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    "postcss-loader"
                ]
            }, {
                test: /.styl$/,
                sideEffects:true,
                use: [
                    'vue-style-loader',
                    "css-loader",
                    "postcss-loader",
                    "stylus-loader" // compiles Styl to CSS
                ]
            }

运行结果：里面根本没有任何样式，这是怎么回事？

Answer 1

vue-loader呢