Question

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

我也看到this，但没有关于风格的信息，css。

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

Answer 1

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

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

他们创建了<{3}}文件

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

最后，在构建过程中，他们将此任务称为this task。

我这样做的方法：

安装gulp，gulp-angular-embed-templates，gulp-inline-ng2-styles。
在应用的根目录中创建名为gulpfile.js的文件

将以下代码添加到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'));
});

运行gulp js:build;
运行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）创建新文件。

Answer 2

我为所有组件使用sass。如果您使用Webpack install sass-loader add：

loaders: [
             {
                 test: /\.scss$/,
                 exclude: /node_modules/,
                 loader: 'style-loader!css-loader!sass-loader'
              }
         ],

然后在您的组件中指定组件scss文件

@Component({
    selector: 'test',
    templateUrl: './test.template.html',
    styleUrls: ['./test.styles.scss']
})

然后您可以为所有组件使用sass外部文件。

此外，如果您需要某些全局样式或想要导入主题，请将此添加到顶级组件。这适用于向应用程序添加引导程序或组件可能需要共享的某些全局样式：

@Component({
    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.template.html',
    styleUrls: [
        '../assets/scss/bootstrap.scss',
        './app.style.scss'
    ]
})

Answer 3

如果你想使用外部HTML模板和CSS样式（甚至是SCSS样式），你可以在NGC编译之前先使用Gulp和＆＃39; gulp-inline-ng2-template＆＃39;来内联它们。插件。

Angular library build workflow with external SCSS and HTML tempaltes

以下是npm脚本在 package.json 中的样子：

{
  "scripts": {
    ...
    "build:esm": "gulp inline-templates && npm run ngcompile",
    "ngcompile": "node_modules/.bin/ngc -p tsconfig-aot.json",
    ...
  }
}

然后 gulpfile.js 看起来像。

const gulp = require('gulp');
const sass = require('node-sass');
const inlineTemplates = require('gulp-inline-ng2-template');

/**
 * Inline templates configuration.
 * @see  https://github.com/ludohenin/gulp-inline-ng2-template
 */
const INLINE_TEMPLATES = {
  SRC: './src/**/*.ts',
  DIST: './tmp/src-inlined',
  CONFIG: {
    base: '/src',
    target: 'es6',
    useRelativePaths: true,
    styleProcessor: compileSass
  }
};

/**
 * Inline external HTML and SCSS templates into Angular component files.
 * @see: https://github.com/ludohenin/gulp-inline-ng2-template
 */
gulp.task('inline-templates', () => {
  return gulp.src(INLINE_TEMPLATES.SRC)
    .pipe(inlineTemplates(INLINE_TEMPLATES.CONFIG))
    .pipe(gulp.dest(INLINE_TEMPLATES.DIST));
});


/**
 * Compile SASS to CSS.
 * @see https://github.com/ludohenin/gulp-inline-ng2-template
 * @see https://github.com/sass/node-sass
 */
function compileSass(path, ext, file, callback) {
  let compiledCss = sass.renderSync({
    data: file,
    outputStyle: 'compressed',
  });
  callback(null, compiledCss.css);
}

script使用了这种方法。您可以在那里查看完整集成示例。

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

3 个答案:

我这样做的方法：

第一个答案（不解决问题）