如何在Vue.js中使CSS与Webpack一起使用

如何解决如何在Vue.js中使CSS与Webpack一起使用

我正在尝试让我的vue js加载我的css文件，但是该应用似乎无法识别它。我也没有收到任何错误，因此试图弄清楚从哪里开始一直很困难。有人会对为什么这不起作用有任何想法吗？以下是我的文件，这是我的文件树的图像-https://share.getcloudapp.com/KourXRmY

webpack.config.dev.js

'use strict'

const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',entry: [
      './src/app.js'
    ],devServer: {
      hot: true,watchOptions: {
        poll: true
      }
    },module: {
      rules: [
        {
          test: /\.vue$/,use: [
            'vue-loader',]
        },{
          test: /\.css$/,use: [
            'vue-style-loader','css-loader'
          ]
        }
      ]
    },plugins: [
      new webpack.HotModuleReplacementPlugin(),new VueLoaderPlugin(),new HtmlWebpackPlugin({
        filename: 'index.html',template: 'index.html',inject: true
      })
    ]
  }

app.js（主要js文件）

import Vue from 'vue';
import App from './App.vue';
import '../assets/app.css';

new Vue({
  el: '#app',render: h => h(App)
})

和我的CSS文件

body {
    background-color: #000 !important;
}

.full-width {
width: 100%;
font-size: 500px;
}

.center-content {
display: flex;
justify-content: center;
align-items: center;
}