modernizr-loader | Get your modernizr build bundled with webpack | Plugin library

I want to integrate a custom Modernizr build into my Angular project for feature detection. I found this Webpack Modernizr loader on GitHub, but I don't know how to integrate it into my project.

I put the following code into a .modernizrrc file in my project root but how do I actually call it?

I am in the middle of transferring a project from an older version of Webpack and Vue.js to Vue cli 3, which is working well, except I am having trouble figuring out how to get an additional loader to work. The loader is 'webpack-modernizr-loader', which loads modernizr and allows me to check if a user's browser can do promises and other modern JavaScript features.

My old webpack.config.js looks something like this:

I have an error when trying to compile a single component vue file using webpack, here is the error I got:

name: 'CssSyntaxError', reason: 'Unnecessary curly bracket', file: 'C:\Users\sprgu\Workspace\fieldtec\formbird-frontend\src\components\User.vue', source: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.ft-user{\n margin: 0;\n\n}\nbutton:first-of-type{\n margin: 0;\n padding: 0;\n text-transform: none;\n}\nbutton:first-of-type:hover,\nbutton:first-of-type:focus,\nbutton:first-of-type:active{\n background: none;\n outline: 0;\n }\n\n', line: 75, column: 9,
message: 'C:\Users\sprgu\Workspace\fieldtec\formbird-frontend\src\components\User.vue:75:9: Unnecessary curly bracket', input: { line: 75, column: 9, source: '\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.ft-user{\n margin: 0;\n\n}\nbutton:first-of-type{\n margin: 0;\n padding: 0;\n text-transform: none;\n}\nbutton:first-of-type:hover,\nbutton:first-of-type:focus,\nbutton:first-of-type:active{\n background: none;\n outline: 0;\n }\n\n', file: 'C:\Users\sprgu\Workspace\fieldtec\formbird-frontend\src\components\User.vue' } }

Here is my webpack.config.js: EDIT: Added vue-loader to my webpack config..

I am trying as follows to webpack an existing code that uses Modernizr:

package.json

I have a webpack configuration (based on React Universally). One thing I'm seeing is that class names on imported scss files are converted to hashes.

I tried as an alternative to import styles as an object and reference the style classes by name, but they simply disappear. Didn't see this behavior on other projects and not sure what I'm doing wrong.