向早午餐添加多个样式表

Question

我几乎是 Angular 的新手，我正在做一个 Angular2 项目。 我想将以下这些 css 文件添加到早午餐 语法是什么？ 将它添加到 brunch-config.js 或 index.html 更好吗？

文件：

'/app/assets/css/bootstrap.css',

'/app/assets/css/custom.css',

'/app/assets/css/font-awesome.css',

'http://fonts.googleapis.com/css?family=Open+Sans'

早午餐配置.js：

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: {
        'vendor.js': /^node_modules/,
        'main.js': /^app/
      },
      order: {
        after: [/\.html$/, /\.css$/]
      }
    },
    stylesheets: {
      joinTo: 'app.css'
    },
    templates: {
      joinTo: 'main.js'
    }
  },
  plugins: {
    inlineCss: {
      html: true,
      passthrough: [/^node_modules/, 'app/global.css']
    }
  }
};

Answer 1

您可以像往常一样使用@import CSS at-rule 或<link> HTML 元素导入字体。要添加其他文件，请将它们放入app/styles 目录。现在不使用它们的原因是因为它们位于assets 文件夹中：请仅在其中放置静态资产（例如模板）。这些文件将加入app.css。确保您已在 HTML 中链接样式表。

此外，您可能会发现 this skeleton 对于引导 Angular 2 应用程序很有用。