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

在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:""
})

button-demo.vue


  


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

 .button{
    background-color: red;
    width:50px;
    height: 20px;
} 

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

运行结果:里面根本没有任何样式,这是怎么回事?

最佳答案

vue-loader呢