vue.js - 如何让我的 CSS 在 vuejs 中与 webpack 一起使用

Question

我试图让我的 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;
}

标签： vue.jswebpack