Aspnetcore-angular-universal: vendor.css not created

[markphillips100]

I've just tried running as per the instructions and whilst the app launches in the browser after hitting F5 I get 404 for vendor.css and glyphicons.woff/woff2/ttf resources. Looking at the webpack I can't see how the vendor.css is ever created. Is it perhaps that there's no webpack vendor config in the repo anymore?

[petarld]

I am experiencing the same issue as @markphillips100, seems that webpack.vendor.config is missing.

Great project so far!

[MarkPieszak]

This is my fault, the upgrade from 2 -> 4, AoT and all the SEO stuff I started out with it being very minimal I need to add some of those things back in, or if anyone else wants to take a crack at it!
Glad you're enjoying it so far ! @petarld 🎁🎈

[markphillips100]

I'll fork and take a look

[markphillips100]

Is vendor css even required with the current setup as app.component.scss is referencing bootstrap scss? For some reason though sass and css loader do not appear to pack the glyphicon fonts so they result in 404s

[MarkPieszak]

Yeah I don't know why they aren't packing them and including them normally. Bootstrap import there seems to do the job, but it doesn't grab everything else. This is a super bizarre and common bootstrap-sass issue, always seems to be 20 ways to fix it...

[AndeyR]

Where is the correct place to add 3rd party css-s ? I am migrating my small half work half pet project from https://github.com/aspnet/JavaScriptServices and get lost here. Project structure is much more complicated and evolving fast (so old issues answers dont work anymore). I use primeng with dependency to font awesome.

[MarkPieszak]

I need to add back in the vendor.css creation, as well as the vendor chunking. Let me take a look! @AndeyR

I started it out rather simple just to get the webpack setup with ngtools so we could get AoT compilation etc. There were a lot of things missing in the original 2.x version (as we had no AoT, no SEO, etc)

Apologies, I do understand it got a little more complicated now but I'm slowly trying to add back in previous functionality to keep it as aligned with JavascriptServices as possible !

[AndeyR]

@MarkPieszak Thanks )
You have nothing to apologies for. I just havent realized that its not supposed to work fully right now and in WIP stage.

[MarkPieszak]

Yeah at the moment everything is functional, there's always tweaks that could be done to improve things :)
I'll try to get those in as soon as I can as they're actually pretty important...

Any help is always appreciated :+1:

[AndeyR]

Sorry, I have very little expertize in it right now, thats why I am asking silly questions like this )
Am I understand you correctly that there is no place right now where I can put reference to theme css from primeng and font-awesome.css ?
Like webpack.config.vendor.js in JavascriptServices.

[MarkPieszak]

Right now you could just import it in the main.browser file for example and it'd work.

I'll get better chunking/splitting and documentation in there to help with these kinds of things soon!

[skorunka]

Quick fix, create new file "webpack.vendor.config.js":

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');
    const cssBundleConfig = {
        stats: { modules: false },
        module: {
            rules: [
                { test: /\.(gif|png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' },
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) }
            ]
        },
        entry: {
            vendor: [
                '@progress/kendo-theme-default/dist/all.css',
                'primeng/resources/primeng.css',
                'primeng/resources/themes/bootstrap/theme.css',
                ...
            ]
        },
        output: {
            path: path.join(__dirname, 'wwwroot', 'dist'),
            publicPath: '/dist/',
            filename: '[name].css'
        },
        plugins: [extractCSS]
    };

    return [cssBundleConfig];
}

[MarkPieszak]

@skorunka If you or anyone wants to make a PR for something like this that'd be greatly beneficial for everyone! 💯