I upgraded the version of Node JS on the project from v12 to v14 and with that some of the packages including laravel-mix v6.0.18.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:\Users\osman\Desktop\Projects\mywebsite\resources\css\fontello.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:\Users\osman\Desktop\Projects\mywebsite\resources\css\theme\index.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.