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

Question

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

我也看到了this，但是没有提到样式，css。

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

Answer 1

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

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

他们创建了 this task 文件，

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

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

我的做法：

安装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 添加：

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 外部文件。

此外，如果您需要一些全局样式或想要导入主题，请将其添加到您的顶级组件中。这对于将 bootstrap 添加到您的应用程序或您的组件可能需要共享的一些全局样式非常有用：

@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 内联它们和 'gulp-inline-ng2-template' 插件。

以下是 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);
}

angular-library-seed 使用了这种方法。您可以在那里查看完整的集成示例。

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

Create Angular 2 component library without inline styles

libraries

npm

angular

我的做法：

第一个回答（没有解决问题）