Hi there,
I’m running ionic with gulp and webPack atm. I’m trying to depend less on Gulp since I sometimes experience issues with it. And prefer to do everything in webpack as I also do this in other Angular2 Applications, for my private dependancies it’s also easier to configure webpack for typescript hence why I chose it.
Right now I’m having troubles getting the scss to compile properly. I got so far to get no more errors on the @import “ionic.md” etc. which is because it’s in node_modules.
Now I however have problems loading the fonts, which are in node_modules/angular-ionic/fonts (if I’m not incorrect typing from head here).
so basically a list of this:
ERROR in ./app/theme/app.md.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/roboto-regular.ttf in
/Users/mathijs/projects/my.name.space/app/theme
@ ./app/theme/app.md.scss 6:183570-183608
Which I believe is refered from inside theionic-angular project.
My current webpack config, note there are some duplicates and rarities, this is becuase I’m fiddling with it right now:
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
module.exports = {
entry: [
path.resolve('polyfills'),
path.resolve('app/app'),
path.resolve('app/theme/app.md'),
path.resolve('app/theme/app.wp'),
path.resolve('app/theme/app.ios')
],
output: {
path: path.resolve('www/build/js'),
filename: 'app.bundle.js',
pathinfo: false // show module paths in the bundle, handy for debugging
},
module: {
loaders: [
{
test: /\.ts$/,
loader: 'awesome-typescript',
query: {
doTypeCheck: true,
resolveGlobs: false,
externals: ['typings/browser.d.ts']
},
include: [path.resolve('app'), path.resolve('node_modules/mylib-ts'), path.resolve('polyfills')]
//,exclude: /node_modules/
},
{
test: /\.html$/,
loader: 'raw-loader'
//exclude: [path.resolve('src/index.html')]
},
{
test: /\.js$/,
include: path.resolve('node_modules/angular2'),
loader: 'strip-sourcemap'
},
{
test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass'])
}
],
noParse: [
/es6-shim/,
/reflect-metadata/,
/zone\.js(\/|\\)dist(\/|\\)zone/
]
},
plugins: [ new ExtractTextPlugin("css/[name].css") ],
sassLoader: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'app'
] },
resolve: {
root: ['app'],
alias: {
'angular2': path.resolve('node_modules/angular2')
},
extensions: ["", ".js", ".ts", ".scss"]
}
};
I was wondering if anyone is also working with webpack and fixed a simular issue. I don’t feel too confident in my abilities to set up the entire thing but I’m trying, so any help would be appreciated.
Some other reasons I’m changing stuff, is because I dislike the templateUrl: build/somedir/somedir/somefile.html solution as I tend to have quite some folders, therefore I changed it to template: require(’./somefile.html’) which also reflects my other projects.
I hope for not much bashing and some help or tips ;-).