I upgraded the version of Node JS on the project from v12 to v14 and with that some of the packages including laravel-mix.Through-out the project there are these css modules “:global(selector)” being used , that after updating are not working.
I tried adding css-loader as a module in webpack.mix.js
:
module: {
rules: [
{
test: /.css$/,
use : [
{
loader: 'css-loader',
options: {
modules: true,
}
}
]
}]} // there are some other babel rules as well.
After running npm run watch
and it compiles it shows this error:
ERROR in ./resources/css/fontello.css (./node_modules/laravel-mix/node_modules/css-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-7[0].rules[0].use[2]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-23[0].rules[0].use[0]!./resources/css/fontello.css)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) C:UsersosmanDesktopProjectsmyhomeresourcescssfontello.css Unknown word
> 1 | // Imports
| ^
2 | import ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from "../../node_modules/css-loader/dist/runtime/noSourceMaps.js";
3 | import ___CSS_LOADER_API_IMPORT___ from "../../node_modules/css-loader/dist/runtime/api.js";
There are 14 errors exactly the same as this that appear, just the path ./resources/css/fontello.css
changes.
In the browser console the error appears like this:
Uncaught Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError
(1:1) C:UsersosmanDesktopProjectsmyhomeresourcescssthemeindex.css Unknown word
[1m[31m>[39m[22m[90m 1 | [39m// Imports
[90m | [39m[1m[31m^[39m[22m
[90m 2 | [39mimport ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ from [32m"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js"[39m[33m;[39m
[90m 3 | [39mimport ___CSS_LOADER_API_IMPORT___ from [32m"../../../node_modules/css-loader/dist/runtime/api.js"[39m[33m;[39m
Any help would be appreciated.