webapck 配置vue解析报错 Module parse failed: Unexpected character '#'

错误提示：

Module parse failed: Unexpected character '#' (20:0)
File was processed with these loaders:
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> #app {
| font-family: Avenir, Helvetica, Arial, sans-serif;
| -webkit-font-smoothing: antialiased;
@ ./src/App.vue 4:0-63
@ ./src/main.js 2:0-27 9:17-20

webpack loader配置：

    {

        test: /\.vue$/,

        use: ["vue-loader"],

      }

 

原因分析：

以前用vue-loader解析.vue没有问题，现在却在报错，那么可以从新版本特性上入手

 

解决方法：

 vue-loader@15.*之后除了必须带有VueLoaderPlugin 之外，还需另外单独配置css-loader。

const VueLoaderPlugin = require("vue-loader/lib/plugin");
{
        test: /\.vue$/,
        use: ["vue-loader"],
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
 }
plugins: [
    new VueLoaderPlugin()
],