webpack2打包vue报错

Question

本来是在index.vue中是使用sass的，结果报错，换成css后还是报错：

index.vue

<style>
  .home-wrapper {
    padding-bottom: 70px;
  }
</style>
...

webpack2配置:

const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
module.exports = {
  entry: './src/configs/main2.js',
  output: {
    path: __dirname,
    filename: './skin/m/js/m2.js',
  },
  module: {
    rules: [
      {
        test: '\.vue$',
        loader: 'vue-loader',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              loader: 'css-loader',
              fallbackLoader: 'vue-style-loader'
            })
            // sass: ExtractTextPlugin.extract({
            //   fallbackLoader: 'vue-style-loader',
            //   loader: [{
            //     loader: 'css-loader'
            //   }, {
            //     loader: 'sass-loader'
            //   }]
            // }),
          }
        }
      }, {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [{
            loader: 'css-loader',
          }, {
            loader: 'sass-loader'
          }]
        }),
      }, {
        test: /\.js$/,
        loader: 'babel-loader'
      }
    ],
  },
  plugins: [
    new ExtractTextPlugin({
      filename: './skin/m/css/m2.css',
      allChunks: true,
    }),
  ],
};

package.json

{
  "devDependencies": {
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-0": "^6.16.0",
    "cross-spawn-async": "^2.2.5",
    "css-loader": "^0.26.1",
    "eslint": "^3.11.1",
    "eslint-config-airbnb-base": "^10.0.1",
    "eslint-plugin-import": "^2.2.0",
    "extract-text-webpack-plugin": "^2.0.0-beta.4",
    "file-loader": "^0.9.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "^2.6.1",
    "gulp-html-minifier": "^0.1.8",
    "gulp-htmlmin": "^3.0.0",
    "gulp-imagemin": "^3.1.1",
    "gulp-replace": "^0.5.4",
    "gulp-retina-sprites": "0.0.3",
    "gulp-rev": "^7.1.2",
    "gulp-sass": "^2.3.2",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-sprite-glue": "^0.1.1",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "gulp.spritesmith": "^6.2.1",
    "jade": "^1.11.0",
    "jade-loader": "^0.8.0",
    "pug": "^2.0.0-beta6",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vue-hot-reload-api": "^2.0.6",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^10.0.2",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.4",
    "webpack": "^2.1.0-beta.27"
  },
}

错误信息:

Answer 1

css-loader安装了没

Answer 2

我的配置是这样的，module下的loaders,好像没有你里面的rules

  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/, loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: 'css-loader'
        })
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        query: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },

Answer 3

我遇到过一次，倒不是vue。

当时样式中有url(../img/1.png)这种引用，但是在webpack配置中，没写module.rules相应的图片规则，就报错了。

你先试试把样式精简下，就保留一行，还会不会报错。

Answer 4

过去好久的问题，有缘人出来答一发。
早上我的项目也出现了这个问题，一个好久没用的组内自己的ui vue component轮子，吧vue-cli执行完的的结果拖过来提示.vue解析不能的这个错，各种懵逼。

禁用了所有插件，还是不行，搜索的结果很少，全是说file-loader、url-loader在兼容img的时候出了问题，反思自己没引用什么file啊。。

各种尝试发现，把webpack.config中的module:{ rules:[{}]}里的rules换成loaders就好了。

想想，好奇怪，loaders是vue1的语法，又去翻文档，对的呀对的呀，配置文件没写错啊。。百无聊赖的时候，一个念头浮上脑海，草，不会是依赖引的就不是webpack2而是webpack1吧。。。。

打开package.json一看，草草草果然。依赖版本1.13.1。项目太多，以为都升级到了webpack2的原因。。。。好吧，如果后来人点入这里，请先确认您的webpack版本，webpack1 必须使用loader，2才更新到rules，相关内容不妨查阅：https://juejin.im/entry/581d9...