No theme CSS loaded when using Galleria and Webpack

[mdmoura]

I am trying to use Galleria with Webpack and I get the error:

No theme CSS loaded

I know Galleria and JQuery are working because I get on the console:

JQuery Works
Galleria Works

when using the following index.js:

import $ from 'jquery';

import Galleria from 'galleria';

window.Galleria = Galleria; 

import '../../node_modules/galleria/dist/themes/twelve/galleria.twelve.css';
import '../../node_modules/galleria/dist/themes/twelve/galleria.twelve.js';

$(document).ready(function () {

  console.log("JQuery works");

  if (window.Galleria)
    console.log("Galleria works");

  Galleria.run('.galleria');

});

The Webpack config is (I omitted some code for sake of simplicity):

module.exports = {

  entry: path.resolve(__dirname, 'src/app/index.js'),  

  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.min.js'
  },

  module: {
    rules: [
      {
        test: /galleria.*.js$/,
        loader: "imports-loader?this=>window"
      }
    ]
  }

};

What am I missing?

[thedanbob]

I know this is almost two years late, but I thought I'd leave this here in case anyone else winds up here looking for an answer. Galleria really doesn't play well with Webpack. The solution I came up with was to load the theme and initialize the plugin manually.

// theme.js

import Galleria from 'galleria'
import $ from 'jquery'
import 'galleria/dist/themes/classic/galleria.classic.css'

// Find the theme file you want to load (e.g. galleria.classic.js) and copy
// the object in the Galleria.addTheme() call here
const theme = { /* theme object */ }
export default theme

// index.js

import Galleria from 'galleria'
import theme from './theme'

$(function() {
  let el = $('#galleria')
  if (el.length > 0) {
    let options = {} // Galleria options
    let galleria = new Galleria().init(el, options)

    galleria.theme = theme
    galleria._init.call(galleria)
    el.data('galleria', galleria)
  }
})

If you're doing anything fancier than just loading a single instance this probably won't work quite right. Refer to the definition of $.fn.galleria and copy what you need.