How to include a 3rd party CSS?

Questions / Help
, ,
1

The library in my case is vex. I ran npm install vex and followed vex’s installation docs by adding below to app.js:

import vex from 'vex-js'
vex.registerPlugin(require('vex-dialog'))
vex.defaultOptions.className = 'vex-theme-default'

I found this library in Phoenix.Component docs, in the Overriding the default confirm behaviour section, also in app.js:

// listen on document.body, so it's executed before the default of
// phoenix_html, which is listening on the window object
document.body.addEventListener('phoenix.link.click', function (e) {
  // Prevent default implementation
  e.stopPropagation();
  // Introduce alternative implementation
  var message = e.target.getAttribute("data-confirm");
  if(!message){ return true; }
  vex.dialog.confirm({
    message: message,
    callback: function (value) {
      if (value == false) { e.preventDefault(); }
    }
  })
}, false);

Using data-confirm attribute, above confirm() gets called, but its CSS is missing. I’ve copied vex.css and vex-theme-default.css to assets/vendor/vex/. Where and how do I now include these two files? Like so, in app.js?

import '../vendor/vex/vex.css'
import '../vendor/vex/vex-theme-default.css'

Doh, I just need to import them from app.css:

@import "../vendor/vex.css";
@import "../vendor/vex-theme-default.css";

Let me know if there’s a better way to import the CSS. I presume assets/css is meant for an app’s own CSS and vendor/ is a better place for this case, for vex.

Phoenix 1.7.2
LV 0.18.18

1 Like
2

Doh, I just need to import them from app.css:

@import "../vendor/vex.css";
@import "../vendor/vex-theme-default.css";

Let me know if there’s a better way to import the CSS. I presume assets/css is meant for an app’s own CSS and vendor/ is a better place for this case, for vex.

3

Yep! What you have looks good. At least, it’s exactly how I would do it—take that how you will :sweat_smile: