[Question] is it possible to generate the css file and import it in webpack?

[c33s]

i use symfony with webpack-encore and try to include the generated css file in the app.css file.

webpack.config.js

...
.addPlugin(new GoogleFontsPlugin({
    fonts: [
        { family: 'Dosis', variants: ['400'], subsets: ['latin'] },
    ],
    filename: 'css/fonts.css'
}))
.enableSassLoader()
.addEntry('js-app', './assets/js/app.js')
...

app.js

import '../../public/build/css/fonts.css';
import '../css/app.scss';

this files, as font.css is generated in the same run as it is included.

i currently have to add the css files in my html file like this:

<link href="{{ asset('build/css/fonts.css') }}" rel="stylesheet">
{{ encore_entry_script_tags('css-app') }}

where it would be nice to only use the encore_entry_script_tags twig function (which simply adds css tag with build/app.css

or should this be handled automatically by webpack encore? so i would file a ticket there

[vworldat]

As discussed on the phone the only sane way I see at the moment is to use 2 separate webpack configurations and have the first generate the fonts.css while the second includes the generated file.

And as discussed as well: you probably don't want this anyway because of increased page loading times if the fonts are embedded in your core javascript build (you could of course use separate target package files). But if you do, separate webpack calls can be set up easily and transparently.