Webpack lädt nicht CSUs einzelne Dateikomponenten CSS

Question

Webpack kompiliert einzelne Dateikomponenten, lädt jedoch kein CSS. HTML und Vue werden korrekt gerendert, jedoch ohne CSS. Es scheint ein Problem mit der Webpack-Konfiguration zu sein. Irgendeine Idee, was los ist?

Ich verwende webpack-dev-server, um den Entwicklungsserver zu laden.

src / index.html

<html>
<head>
    <title>Vue Hello World</title>
</head>
<body>
    <h1>Header</h1>
    <div id="app"></div>
</body>
</html>

src / Hello.vue

<template>
  <p>{{ greeting }} Test!</p>
</template>

<script>
module.exports = {
  data : function () {
      return {
          greeting: 'Hello'
        }
    }
}
</script>

<style scoped>
  p {
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    color: blue;
  }
</style>

src / main.js

import Vue from 'vue';
import Hello from './Hello.vue';

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

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/main.js',
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.vue$/, exclude: /node_modules/, use: 'vue-loader' },
      { test: /\.css$/, exclude: /node_modules/, use: ['vue-style-loader', 'css-loader']},
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new VueLoaderPlugin(),
  ]
};

Answer 1

Ich habe gerade die letzten 4 Stunden damit verbracht, das herauszufinden. Ich wollte nur Webpack verwenden, da es viel besser in meine Gulp-Pipeline integriert ist als Vue CLI. Ich bin mir nicht sicher, auf welcher Version von CSS-Loader Sie sich befinden und ob es sich um dieselbe Ursache handelt, hoffe aber, dass dies auch Ihnen hilft.

TL; DR: Verwenden Sie anstelle von "CSS-Loader":

{
  loader: 'css-loader',
  options: {
    esModule: false
  }
}

Ich verwende SCSS, das das gleiche Problem hat, aber für Ihr Beispiel wäre das:

{ test: /\.css$/, exclude: /node_modules/, use: ['vue-style-loader', { loader: 'css-loader', options: { esModule: false }}]}

Ich bin mir nicht sicher, ob dies eine richtige Lösung oder nur eine Problemumgehung ist. Ich habe das herausgefunden, weil ich ein altes Projekt hatte, das vorher funktioniert hat, aber sobald ich alle Pakete aktualisiert habe, ist es fehlgeschlagen. Schließlich habe ich es auf den CSS-Loader zurückgeführt, der vor und nach dem Update Version 2.1 war. Es funktionierte bis Version 3.6, dann schlug es mit 4.0 fehl. Dann habe ich nur versucht, die verschiedenen Optionen umzuschalten, und dies war diejenige, die das Problem behoben hat (ich habe nie behauptet zu wissen, was ich tat ;-)).

Bearbeiten : seiluv hat einen Link zu einem Kommentar zu Github von vue-style-loader hinzugefügt , der dies als Problemumgehung bestätigt. Es wurde anscheinend einen Monat zuvor veröffentlicht, aber ich habe es bei meiner Suche nach einer Antwort nicht gefunden. Danke seiluv!

Answer 2

Ich bin auf dasselbe Problem gestoßen, also entweder:

Verwenden Sie Style-Loader anstelle von Vue-Style-Loader

Wie hier vorgeschlagen .

use: ['style-loader', 'css-loader']

Grundsätzlich funktioniert das Upgrade auf CSS-Loader 4.xx + nicht gut mit Vue-Style-Loader.

oder

Deaktivieren Sie die esModule-Option von css-loader

Die Lösung von MvRens ist ebenfalls gültig und wird durch diesen Kommentar zu github bestätigt.

Das Problem ist, dass das esModule von css-loader standardmäßig auf true gesetzt ist und in diesem Fall false sein sollte.