CODEWITHSUNDEEP
javascriptember.js
UXCODA
UXCODA

Reputation: 1226

How to output multiple css files in Ember app

I am doing an ember build and I have 3 stylesheets that need to compiled into their own stylesheets.

This is how the ember-cli-build.js is by default

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-foundation-6-sass': {
      'foundationJs': 'all',
    },
  });

And this is what I have tried but I don't see new files generated. The file paths are correct.

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-foundation-6-sass': {
      'foundationJs': 'all',
    },
    css: {
      '/components/icons.data.svg': '/assets/icons.data.svg.css',
      '/components/icons.data.png': '/assets/icons.data.png.css',
      '/components/icons.fallback': '/assets/icons.fallback.css',
    },
  });

Upvotes: 2

Views: 352

Answers (1)

knownasilya
knownasilya

Reputation: 6143

This section of the CLI docs might be useful: https://cli.emberjs.com/release/advanced-use/asset-compilation/#configuringoutputpaths

Basically you can set something like:

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-cli-foundation-6-sass': {
      'foundationJs': 'all',
    },
    outputPaths: {
      app: {
        css: {
          'components/icons.data.svg': '/assets/icons.data.svg.css',
          'components/icons.data.png': '/assets/icons.data.png.css',
          'components/icons.fallback': '/assets/icons.fallback.css'
        }
      }
    }
});

The keys on the left are not supposed to contain the extension, since postprocessing is supported, so I'm not sure about how your files are setup (if the ones you show have css extensions).

Upvotes: 3

Related Questions