CODEWITHSUNDEEP
angularjsstylesheetbrunch
Soli
Soli

Reputation: 882

Adding multiple stylesheets to brunch

I'm almost new to angular and I'm working on an Angular2 project. I want to add these following css files to brunch What is the syntax? Is it better to add it to brunch-config.js or index.html?

Files:

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

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

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

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

brunch-config.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']
    }
  }
};

Upvotes: 1

Views: 483

Answers (1)

Alexey Shvayka
Alexey Shvayka

Reputation: 73

You can import fonts using @import CSS at-rule or <link> HTML element, as usual. To add other files, put them to app/styles directory. The reason they are not used now is because they are in assets folder: please, place only static assets (e.g. templates) there. These files will be joined to app.css. Make sure you have linked stylesheet in HTML.

Also, you may find this skeleton useful for bootstrapping Angular 2 apps.

Upvotes: 1

Related Questions