Vue-cli: Add extractCSS option to schema to enable override of extract-css plugin settings

Created on 30 Mar 2018 · 2Comments · Source: vuejs/vue-cli

What problem does this feature solve?

Currently it is IMO not possible to override the filename of an extracted css, by defining an extractCSS object in the vue.config.js.
The object itself would be already used here:
https://github.com/vuejs/vue-cli/blob/e65110f3f6c27ce79d6027fa6abc3d7c930d64ea/packages/%40vue/cli-service/lib/config/css.js#L106

but is not allowed by the schema, defined in options.js of the parent dir.

What does the proposed API look like?

Add extractCSS: joi.object() to the schema definition inside cli-service/lib/options.js

next cli-service build cli-service serve

Source

mediaessenz

👍1

Most helpful comment

Meanwhile I found a way (thank to @eliperelman) to do this with help of the chainWebpack inside my vue.config.js:

chainWebpack: config => {
    config
        .when(process.env.NODE_ENV === 'production', plugin => {
            plugin.plugin('extract-css').tap(([options, ...args]) => [
                Object.assign({}, options, { filename: 'Css/[name].css' }),
                ...args
            ])
        })
},

mediaessenz on 31 Mar 2018

👍4

All 2 comments

Meanwhile I found a way (thank to @eliperelman) to do this with help of the chainWebpack inside my vue.config.js:

chainWebpack: config => {
    config
        .when(process.env.NODE_ENV === 'production', plugin => {
            plugin.plugin('extract-css').tap(([options, ...args]) => [
                Object.assign({}, options, { filename: 'Css/[name].css' }),
                ...args
            ])
        })
},

mediaessenz on 31 Mar 2018

👍4

@mediaessenz How to use the options.publicPath of extractCss?