I am currently trying to integrate webpack CSS modules into my angular/ionic project. I'm wondering if it's possible for the CSS module class definitions to be correctly appended to an external template instead of an inline template.
When I embed the template directly into the route, everything works as expected:
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 to simply require my template like this?
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 assume that I may need to adjust my webpack configuration, but I am uncertain about how to proceed.
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')
]
}]
}
};