webpack2+vue2 配置extract-text-webpack-plugin抽出css失败

Question

代码大致是这样的， 但是entry中引入的.vue文件， 无法抽取css到一个单独的style.css文件中, 何解？

//...

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue',
      exclude: /node_modules/,
      options: {
        css: ExtractTextPlugin.extract({
          loader: 'css-loader!sass-loader',
          fallbackLoader: 'vue-style-loader'
        })
      }
    }, {
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/
    }, {
      test: /\.(css|scss|sass)$/,
      loader: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: 'css-loader!sass-loader'
      })
    } {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'file',
      options: {
        name: '[name].[ext]?[hash]'
      }
    }]
  },
  plugins: [
    new ExtractTextPlugin('css/styles.css')
  ]
  //...
}

Answer 1

改成

  options: {
    scss: ExtractTextPlugin.extract({
      loader: 'css-loader!sass-loader',
      fallbackLoader: 'vue-style-loader'
    })
  }

Answer 2

我也是碰到的这个问题，请问你现在解决了么

Answer 3

 module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    //https://github.com/ai/browserslist
                    postcss: [require('autoprefixer')({
                        browsers: ['last 2 versions']
                    })],
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: ['css-loader'],
                            fallback: 'vue-style-loader' 
                        })
                        //....scss less sass more
                    },
                    sourceMap:true
                }
            }
        ]
    },

具体看他vue-loader 更新了 和webpack1 用法不一样