为什么我的 CSS 没有被捆绑到应用程序中？

Question

我正在尝试在 vue.js、scss 和 webpack 中启动一个新项目（服务器端是 express.js、TS）。从之前一切正常的项目转移配置。在我看来，一切看起来都是正确的。构建成功...但是浏览器不应用我的样式。 我不明白我设置错了什么！

app.js：

import Vue from 'vue'
window.Vue = require('vue');

import './scss/index.scss'

import Signin from './Signin.vue'

const app = new Vue({
    render: h => h(Signin),
    el: '#guest-entry',
});

登录.vue：

<template>
  <div id="signin-page">
    <h1 class="title">Lorem ipsum dolor sit amet consectetur</h1>
    <h3 class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus tenetur sit dicta repudiandae maxime ex corporis provident quos, minima, dolor cum eligendi veniam! Ut ab minus ad voluptatem, totam fuga!</h3>
  </div>
</template>

index.scss：

@import 'variables';

#signin-page {
    .title {
        text-align: center;
        color: $red;
    }
}

webpack 配置：

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: {
    admin: ['babel-polyfill', './client/admin/app.js'],
    user: ['babel-polyfill', './client/user/app.js'],
    guest: ['babel-polyfill', './client/guest/app.js']
  },
  output: {
    path: path.resolve(__dirname, 'client/static/js/'),
    publicPath: '/js/',
    filename: '[name]/bundle.js',
    chunkFilename: '[id].chunk.js'
  },
  resolve: {
    extensions: ['*', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      "@": path.resolve(__dirname, "client"),
      "@@": path.resolve(__dirname, "node_modules")
    },
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /\.js|mjs$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        },
      },
      {
        test: /\.(scss|css)$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.svg$/,
        loader: 'svg-inline-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
};

在 Firefox 中： Dev tools Page

Answer 1

我刚刚将 vue-style-loader 替换为 style-loader 并且成功了。