This extension adds support for Modernizr to Laravel Mix by using the webpack-modernizr-loader.
It allows you to easily configure, create and manage custom Modernizr builds in your Laravel Mix project.
npm i -D laravel-mix-modernizr
Require and use the extension inside your webpack.mix.js like this:
/*
* webpack.mix.js
*/
const mix = require('laravel-mix');
require('laravel-mix-modernizr');
mix
.js('app.js', 'dist')
.modernizr()This will use or create a .modernizrrc file in your project root and make the corresponding custom build instantly accessible via a Modernizr global identifier when you run Mix.
Now, set the Modernizr configurations to your liking, for example:
/*
* .modernizrrc
*/
module.exports = {
"classPrefix": "supports-",
"options": [
"addTest",
],
"feature-detects": [
"test/css/flexbox",
"test/css/transforms"
]
};For more information on how to configure Modernizr please refer to their documentation.
You can now use the resulting Modernizr build in your project:
/*
* app.js
*/
// Includes the custom Modernizr build based on the configurations set in .modernizrrc
require('Modernizr');If you want to get fancy with Modernizr (i.e. access Modernizr), you don't even need to explicitly require it. Just start using it. A behind-the-scenes call of mix.autoload() will handle the import automatically.
/*
* app.js
*/
// Once accessed, the Modernizr build will be imported automatically
Modernizr.addTest(/* ... */);You can also use non-standard configuration file locations and custom global identifiers to maintain multiple different Modernizr builds in your project:
/*
* webpack.mix.js
*/
const mix = require('laravel-mix');
require('laravel-mix-modernizr');
mix
.js('app.js', 'dist')
.modernizr({
SpecialModernizr: '.special-modernizrrc', // Creates a build based on .special-modernizrrc
AnotherModernizr: 'some/path/modernizrrc.js' // Creates a build based on some/path/modernizrrc.js
})You now have access to the SpecialModernizr and AnotherModernizr global identifiers instead of the default Modernizr. Use them just like in the basic example.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent