Webpack Mix Vue issue with CSS output

Hi All,

I have a strange issue whereby when adding the following to my Vue JS file, the master CSS file output is empty!

campaign_stats.js (my Vue JS file)

import Vue from 'vue';
import App from './App.vue';
import VueResource from 'vue-resource';
import VueRouter from 'vue-router';
import Routes from './routes';

// Importing amCharts is all new and caused it to break
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";

am4core.useTheme(am4themes_animated);
// ...end new code

Vue.use(VueResource);
Vue.use(VueRouter);

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
});

export const bus = new Vue();

This is my webpack.js file (was working before including amCharts to my Vue JS file)

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/campaign_stats/js/campaign_stats.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css').version()
    .sass('resources/js/campaign_stats/sass/campaign_stats.scss', 'public/css').version()
    .sourceMaps(true, 'source-map')
    .browserSync('mysite.laravel');

Any ideas as to what the issue is? I get no errors in console and the master app.css file contains the following!!

/* (ignored) // (ignored) // (ignored) / /# sourceMappingURL=app.css.map*/

Thanks, K....

kandroid

5 years ago

Level 2

Actually, it is both CSS file outputs that are empty!

JS side is fine ironically which makes me think this is a Webpack/Mix issue!

kandroid

5 years ago

Level 2

OK, I found that running the main site mix and the Vue component mix independently helped!

My webpack.js file now looks like this:

const mix = require('laravel-mix');

require('laravel-mix-merge-manifest');

if (process.env.npm_config_section === 'portal') {
    mix.js('resources/js/app.js', 'public/js')
        .sass('resources/sass/app.scss', 'public/css').version()
        .sourceMaps(true, 'source-map')
        .mergeManifest()
        .browserSync('mysite.laravel');
} else if (process.env.npm_config_section === 'stats') { 
    mix.js('resources/js/campaign_stats/js/campaign_stats.js', 'public/js')
        .sass('resources/js/campaign_stats/sass/campaign_stats.scss', 'public/css').version()
        .sourceMaps(true, 'source-map')
        .mergeManifest()
        .browserSync('mysite.laravel');
}

I had to install 'laravel-mix-merge-manifest' and include it in my webpack.js file.

I now run the following independently (which is fine for now I guess):

npm --section=portal run development -- --watch
or
npm --section=stats run development -- --watch

Hope this helps somebody - and if you know how to just combine as one I would like to know!

K...

Please or to participate in this conversation.