Webpack无法加载Vue的单个文件组件CSS 使用样式加载器代替vue样式加载器禁用css-loader的esModule选项

如何解决Webpack无法加载Vue的单个文件组件CSS 使用样式加载器代替vue样式加载器禁用css-loader的esModule选项

Webpack正在编译单个文件组件，但未加载CSS。 HTML和Vue可以正确呈现，但是没有CSS。 webpack配置似乎是一个问题。知道怎么了吗？

我正在使用webpack-dev-server加载开发服务器。

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$/,use: 'vue-loader' },{ test: /\.css$/,use: ['vue-style-loader','css-loader']},]
  },plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',}),new VueLoaderPlugin(),]
};

解决方法

我刚刚花了最后4个小时来解决这个问题。我只想使用Webpack，因为它比Vue CLI更好地集成到了Gulp管道中。不知道您使用的是哪个版本的css-loader，以及是否是相同的原因，但是希望这对您有所帮助。

TL; DR：而不是'css-loader'，请使用：

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

我使用的SCSS存在相同的问题，但对于您的示例而言，将是：

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

我不确定这是正确的解决方案还是解决方法。我想通了，因为我以前有一个旧项目可以工作，但是一旦我升级了所有软件包，它就失败了。最终，我将其追溯到css-loader，它是更新之前的2.1版和更新之后的4.3版。它可以使用3.6版，然后在4.0版中失败。然后我只是尝试切换各种选项，而这就是固定它的选项（我从不声称知道自己在做什么；-））。

编辑：seiluv在vue-style-loader的Github上添加了指向comment的链接，以确认这是一种解决方法。它似乎是在一个月前发布的，但是我没有找到答案。谢谢seiluv！

我遇到了同样的问题，所以：

使用样式加载器代替vue样式加载器

如建议here。

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

基本上，升级到css-loader 4.x.x +不能与vue-style-loader一起很好地工作。

或

禁用css-loader的esModule选项

MvRens的解决方案也有效并由github上的comment确认。

问题是css-loader的esModule默认情况下设置为true，在这种情况下应该为false。