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 :-)

Michiel Peeters · Accepted Answer · 2018-07-18 08:21:19Z

8

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!

answered Jul 18, 2018 at 8:21

Michiel Peeters

3903 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krishna · Accepted Answer · 2018-07-13 15:58:48Z

0

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>

answered Jul 13, 2018 at 15:58

Krishna

9511 gold badge11 silver badges16 bronze badges

1 Comment

Michiel Peeters Over a year ago

First of all thank you for your response, second your suggestion didn't work. I've added a github repository so you are able to download it and run it and hopefully help me out :-). Thanks!

Collectives™ on Stack Overflow

Vuejs 2.5+ Webpack 4+ not loading CSS files

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related