Vuejs 2.5+ Webpack 4+ not loading CSS files

Question

Currently I'm trying to setup a basic Vue project with webpack 4 enabled. The vue skeleton is based on the Microsoft SPA templates dotnet core. It seems to be that everything is running fine, except that external CSS files somehow are not loaded into the project and it is now bugging me for quite some time with the question why are those CSS files not loading.

What I basically did is 'dotnet new vue' (you need the Microsoft SPA templates installed) and after the creation of the project I started with updating the packages. Currently I have the following package.json file:

{
  "name": "Dashboard",
  "private": true,
  "version": "0.0.1",
  "scripts": {
    "build:development": "webpack"
  },
  "devDependencies": {
    "@types/webpack-env": "^1.13.6",
    "ajv": "^6.5.2",
    "aspnet-webpack": "^3.0.0",
    "awesome-typescript-loader": "^5.2.0",
    "bootstrap": "^4.1.1",
    "coa": "^2.0.1",
    "css-loader": "^1.0.0",
    "event-source-polyfill": "^0.0.12",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^3.3.1",
    "mini-css-extract-plugin": "^0.4.1",
    "popper.js": "^1.14.3",
    "style-loader": "^0.21.0",
    "typescript": "^2.9.2",
    "url-loader": "^1.0.1",
    "vue": "^2.5.16",
    "vue-loader": "^15.2.4",
    "vue-property-decorator": "^7.0.0",
    "vue-router": "^3.0.1",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-middleware": "^3.1.3",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3",
    "webpack-node-externals": "^1.7.2"
  },
  "dependencies": {}
}

And this is my webpack.config.file:

const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    mode: 'development',
    stats: {
        modules: false
    },
    context: __dirname,
    resolve: {
        extensions: [ '.js', '.ts' ]
    },
    entry: {
        'main': './ClientApp/boot.ts'
    },
    module: {
        rules: [
            {
                test: /\.vue\.html$/,
                include: /ClientApp/,
                loader: 'vue-loader',
                options: { loaders: { js: 'awesome-typescript-loader?silent=true' } }
            },
            {
                test: /\.ts$/,
                include: /ClientApp/,
                use: 'awesome-typescript-loader?silent=true'
            },
            { 
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: 'url-loader?limit=25000'
            }
        ]
    },
    output: {
        path: path.join(__dirname, bundleOutputDir),
        filename: '[name].js',
        publicPath: 'dist/'
    },
    plugins: [
        new VueLoaderPlugin(),
        new CheckerPlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: '"development"'
            }
        }),
        new webpack.DllReferencePlugin({
            context: __dirname,
            manifest: require('./wwwroot/dist/vendor-manifest.json')
        }),
        new webpack.SourceMapDevToolPlugin({
            filename: '[file].map',
            moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]')
        })
    ]
};

And I have included the CSS file in the following ways:

In app.ts (I added them both just to test):

import '../navmenu/navmenu.css';
require('../navmenu/navmenu.css');

In boot.ts

import './components/navmenu/navmenu.css';
require('./components/navmenu/navmenu.css');

Or in the original file (navmenu.vue.html) (when a default SPA skeleton has been generated):

<style src="./navmenu.css" />

On all these locations the css file is not included/used in the frontend. I've also tried different approaches in the webpack.config file such as using the extract-text-webpack-plugin.

The basic idea behind is that the SPA template of Microsoft is using Webpack 2 (and other old versions of different packages) and I'm trying to update these to the latest versions.

Hopefully someone can help me out :-)

Answer 1

I've figured it out. Somehow webpack 4 is not picking up the CSS files by itself. You need to install the following plugin first:

MiniCssExtractPlugin

After that in the webpack config add the following configuration:

    { 
        test: /\.(s*)[a|c]ss$/,
        use: [
            "vue-style-loader",
            MiniCssExtractPlugin.loader,
            "css-loader",
            "sass-loader"
        ]
    }

And add the mini css extract plugin also to the plugins section:

new MiniCssExtractPlugin({
    filename: "[name].css"
})

And you should be good to go!

Answer 2

On your main.vue or any vue page inside style add @import "path"

<style>
@import "https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css";
@import "../assests/css/style.css"
</style>