在vue文件中写的样式没有生效是怎么回事?
demo.jsimport 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
export default {
name: "button-demo",
data: function(){
return {text : IS_PROD_ENV};
},
methods:{
show: function(){
alert(this.text);
}
}
}
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
]
}
运行结果:里面根本没有任何样式,这是怎么回事?