為什么我的 CSS 沒有捆綁到應用程序中？

Question

我正在嘗試在 vue.js、scss 和 webpack（服務器端是 express.js、TS）中啟動一個新項目。 從前一個項目中轉移了一切正常的配置。 在我看來，一切看起來都是正確的。 構建成功...但瀏覽器不應用我的樣式。 我不明白我設置錯了什么！

應用程序.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>

索引.scss：

@import 'variables';

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

網絡包配置：

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 中：開發工具頁面

Answer 1

我只是將vue-style-loader替換為style-loader並且它起作用了。