This feature (style sheets inlining) as been implemented in plugin gulp-inline-ng2-template.
Inline Angular2 components style sheets into JavaScript ES5/ES6 and TypeScript files (and possibly more - not tested). This plugin uses the ES6 template strings syntax by default (which requires the use of a transpiler -typescript, babel, traceur- to produce valid ES5 files) but you can opt-in for ES5 one.
This is very convenient to bundle your components/application (avoid extra HTTP request and keeps your source clean).
You may also check out: gulp-inline-ng2-template
npm install gulp-inline-ng2-styles --save-dev
You can pass a configuration object to the plugin.
defaults = {
base: '/', // Angular2 application base folder
extension: '.css', // Template file extension
target: 'es6' // Can swap to es5
};
//...
var inlineNg2Styles = require('gulp-inline-ng2-styles');
var result = gulp.src('./app/**/*ts')
.pipe(inlineNg2Styles({ base: '/app' }))
.pipe(tsc());
return result.js
.pipe(gulp.dest(PATH.dest));
hello.css
.hello {
background-color: #000000;
}
component.ts
import {Component, View} from 'angular2/angular2';
@Component({ selector: 'hello' })
@View({
templateUrl: './template.html',
styleUrls: ['app.css']
})
class Hello {}
result (component.ts)
import {Component, View} from 'angular2/angular2';
@Component({ selector: 'hello' })
@View({
templateUrl: './template.html',
styles: [`
.hello {
background-color: #000000;
}
`]
})
class Hello {}
MIT