Webpack CSS modules and angular templates

Question

Trying to setup webpack CSS modules with my angular/ionic project. Is it possible to have my CSS module class definitions appended correctly to and external template rather than an inline template?

When I hard code my template into the route it works fine:

var styles = require('./css.css')

module.exports = function(ngModule) {

  ngModule.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('tab.two', {
        url: '/two',
        views: {
          'module-two': {
            template:`<ion-view view-title="Module Two"> <ion-content class="padding moduleTwo"> <h2 class="${styles.title}">Welcome to Module Two</h2> </ion-content> </ion-view>`,
            controller: 'TwoCtrl'
          }
        }
      })
  })
}

Is there a way though to just require my template into

var styles = require('./css.css')
module.exports = function(ngModule) {

    ngModule.config(function ($stateProvider, $urlRouterProvider) {

        $stateProvider
                .state('tab.two', {
                    url: '/two',
                    views: {
                        'module-two': {
                            template:require('./myTemplate.html'),
                            controller: 'TwoCtrl'
                        }
                    }
                })
    })
}

I figured I might need set my webpack.config up differently but I'm not sure.

var webpack = require('webpack');
var path = require('path');

module.exports = {
  entry: './index.js',

  output: {
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: "ng-annotate!babel", exclude: /node_modules/},
      {test: /\.html$/, loader: "raw", exclude: /node_modules/},
      {test: /\.json$/, loader: "json", exclude: /node_modules/},
      {
        test: /\.css$/,
        loader: "style!css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]",
        exclude: [
          path.resolve(__dirname, 'node_modules')
        ]
      }]
  }
};

Answer 1

I've struggled with similar issue. Short answer is yes, but probabbly you'll need a template engine, for instance jade.

External jade code, after passing it in your code:

'module-two': {
            template () => {
              console.log(require('./view.jade'));
              return require('./view.jade')(styles);
            }:,
            controller: 'TwoCtrl'
          }

console.log will give you something like this:

function template(locals) {
    var buf = [];
    var jade_mixins = {};
    var jade_interp;

    buf.push("<div" + (jade.cls(['text-center',"" + (locals.test) + ""], [null,true])) + ">dsadsadadas</div>");;return buf.join("");
    }

so after passing styles to template function you can use it inside template as locals.