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()
],