Vue-loader: Extract sass does not work

[iatsiuk]

Webpack doesn't emit style.css. I've followed instructions from the extract-css.md document.

$ yarn run build
yarn run v0.19.1
$ cross-env NODE_ENV=production webpack --progress --hide-modules
Hash: 835c8f4789b0a6bd898c
Version: webpack 2.2.1
Time: 6210ms
                                    Asset     Size  Chunks             Chunk Names
logo.png?82b9c7a5a3f405032b1db71a25f67021  6.85 kB          [emitted]
                                 build.js  79.1 kB       0  [emitted]  main
                             build.js.map   631 kB       0  [emitted]  main
Done in 7.13s.

Content of the webpack.config.js:

var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            'scss': 'vue-style-loader!css-loader!sass-loader',
            'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
            css: ExtractTextPlugin.extract({
              use: 'css-loader',
              fallback: 'vue-style-loader'
            })
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map',
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new ExtractTextPlugin("style.css"),
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

Also I've created test repo.

[kazupon]

You need to change the below:

{
  ...
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: ExtractTextPlugin.extract({
              use: 'css-loader!sass-loader',
              fallback: 'vue-style-loader'
            }),
            sass: ExtractTextPlugin.extract({
              use: 'css-loader!sass-loader?indentedSyntax',
              fallback: 'vue-style-loader'
            })
          }
        }
      },
  ...
    module.exports.plugins = (module.exports.plugins || []).concat([
      new ExtractTextPlugin({
        filename: '[name].[contenthash].css'
      })
...

[csonlai]

Using webpack2 , styles are still in the bundle

[Naeemo]

@csonlai +1.
But not all .vue files, only the lazy-loading(webpack-code-splited) ones. Those directly imported work out ok.
My vue loader:

{
    test: /\.vue$/i,
    loader: 'vue-loader',
    options: {
        loaders: {
            sass: ExtractPlugin.extract({
                use: ['css-loader', 'sass-loader'],
                fallback: 'vue-style-loader'
            })
        }
    }
},

My style tag:

<style lang="sass" type="text/scss" rel="stylesheet/scss">

[wolthers]

Same issue. Code splitted chunks are not emitted or loaded with the fallback

[davidsielert]

I'm having same problem I'm only getting output from a single file

[isaactzab]

Same issue still in 2018. somehow to solve?

[miaulightouch]

for split chunk, please read extract-text-webpack-plugin docs,

you should use allChunks option, like this:

  plugins: [
    new ExtractTextPlugin({
      allChunks: true,
      filename: 'style.css'
    })
  ]