CODEWITHSUNDEEP
cssbrunch
Max
Max

Reputation: 5091

Brunch not picking up vendor CSS as expected

I'm trying to use Pure.css in my application. I've installed it using npm and have my brunch-config.js configured like so:

stylesheets: {
  joinTo: {
    'app.css': /^app/,
    'vendor.css': /^(?!app)/
  }
}

I expect vendor.css to be generated at this point, but it's not. However, if in my JavaScript, I say require('purecss');, then I get vendor.css generated...but I also get the JavaScript error Cannot find module 'purecss' from '<filename>'. I've also tried various permutations of @import 'purecss' in my CSS without success.

How does one consume vendor CSS from npm modules?

Upvotes: 1

Views: 210

Answers (1)

matix2267
matix2267

Reputation: 620

You should use npm config section, for example when I wanted to include node_modules/bootstrap/dist/css/bootstrap.css I had to put the following in my brunch-config.js:

npm: {
  styles: {
    bootstrap: ['dist/css/bootstrap.css']
  }
}

That, combined with your section in files makes it write bootstrap's css into vendor.css.

Full brunch-config.js that works for me:

module.exports = {
  files: {
    javascripts: {
      joinTo: {
        'app.js': /^app/,
        'vendor.js': /^(?!app)/
      }
    },
    stylesheets: {
      joinTo: {
        'app.css': /^app/,
        'vendor.css': /^(?!app)/
      }
    }
  },

  plugins: {
    babel: { presets: ['es2015'] }
  },

  npm: {
    styles: {
      bootstrap: ['dist/css/bootstrap.css']
    }
  }
};

Upvotes: 1

Related Questions