angular - 创建没有内联样式的 Angular 2 组件库

Question

我红this关于创建 Angular 2 组件库的文章，它使用内联样式。有没有办法在 Angular 2 中创建没有内联样式的库？

我还看到了this , 但没有关于样式、css 的字样。

我的问题是，我想创建一个包含多个组件的复杂组件，而且我还使用 SASS。

Answer 1

这里的问题是，当你编译你的 npm 包时，样式模板必须是内联的，因为当你将它作为 npm 包加载时，你将无法在 node_modules 中实现模板/css 路径。

Angular Material 2 团队使用 follow gulp 任务在其组件中内联 css 和模板:

他们创造了this task归档

1. 获取外部 CSS 并内联；
2. 获取外部 Html 并放入内联；
3. 从组件中删除 module.id；

最后，在构建过程中，他们将此任务称为 here .

我这样做的方法:

1. 安装 gulp、gulp-angular-embed-templates、gulp-inline-ng2-styles。

2. 在您的应用的根目录下创建一个名为 gulpfile.js 的文件

3. 将以下代码添加到您的gulpfile:

   var gulp = require('gulp');
   var embedTemplates = require('gulp-angular-embed-templates');
   var inlineNg2Styles = require('gulp-inline-ng2-styles');
   
   gulp.task('js:build', function () {
     gulp.src('src/*.ts') // also can use *.js files
       .pipe(embedTemplates({sourceType:'ts'}))
       .pipe(inlineNg2Styles({ base: '/src' }))
       .pipe(gulp.dest('./dist'));
   });
   

4. 运行 gulp js:build;

5. 运行 npm run build;

之后，您将拥有一个 dist 文件夹，其中包含一个包含您的样式和内联模板的组件。

第一个答案(没有解决问题)

只需使用 styleUrls 而不是 styles。也适用于模板，只需使用 templateUrl 而不是 template:

@Component({
    selector: 'hello-world',
    styleUrls: ['./hello-world.component.scss'], // HERE (OR CSS)
    templateUrl: './hello-world.component.html', // THE SAME FOR TEMPLATE
})
export class HelloWorld {
    ...
}

不要忘记使用样式和模板创建新文件(./hello-world.component.scss 和 ./hello-world.component.html).