How to change output filename for the extracted CSS?

[mydnicq]

I found that current vue-build in production mode offers fixed filename for the extracted CSS which is taken from the entry path:

In https://github.com/vuejs/vue-cli/blob/master/bin/vue-build

new ExtractTextPlugin(options.lib ? `${replaceExtension(options.entry, '.css')}` : '[name].[contenthash:8].css')

I have a different project folder structure and I need to define a custom filename for the extracted CSS. How this can be achieved?

My temporary solution is presented below, but I think there must be a better way.

module.exports = {

  webpack(defaults, options) {
    defaults.output.filename = './index.js'
    defaults.plugins.find(el => {
      if (el.constructor.name === 'ExtractTextPlugin') {
        el.filename = './style.css'
      }
    })
    return defaults;
  }

};

[egoist]

You can also use .map to replace that plugin.

maybe add option for this:

module.exports = {
  filename: {
    js: 'index.js',
    css: 'style.css',
    assets: 'static/[name].[ext]'
  }
}

[mydnicq]

Ok great!

[casio]

hey there

hm, I'm using v.2.8.1 and for me filename in the (non-webpack) config seems to be just ignored.

filename: {
    js: 'index.js',
    css: 'style.css',
    assets: 'static/[name].[ext]'
}

..will still output eg client.35a7fe68.js when built with prod

[stevensanborn]

yeah 3.0 you can map filename , it expects a string no?