Add custom modernizr to Sage 9

Hi,

Just starting to use Sage 9. I’ve seen in other posts that modernizr was removed, what’s the best way to add this back in and to customise it if needed (only add touchevents etc.)?

2 Likes

I have tried this to several times. Unfortunately, it still not works. Id like to know it to :slight_smile:

1 Like

Would also like to know hot to do it !

Try and search the forum and you would have found this thread and solution:

Tweak the following steps to use it in Sage 9:

  1. Save the modernizr-config.json file in your resources/assets/scripts/ directory.
  2. Browse to: resources/assets/scripts/ and run:
modernizr -c modernizr-config.json
  1. Add the in step 5 generated modernizr script to your dependencies in the assets/config.json like this:
{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "modernizr": [
      "./scripts/modernizr.js"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/sage",
  "devUrl": "http://example.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
  1. Run yarn build
  2. Enqueue your modernizr script in app/setup.php before sage/main.js:
wp_enqueue_script('sage/modernizr.js', asset_path('scripts/modernizr.js'), [], null, true);
3 Likes

Very useful! Thanks @Twansparant

Just don’t forget to add modernizr to the eslint ignore file:

  1. Create .eslintignore in root theme folder.
  2. Add modernizr.js entry
4 Likes