Laravel mix error in lines scss coments

[Andrelirasp]

• Laravel Mix Version: 6.0.25
• Node Version 16.3.0
• NPM Version 7.20.0
• OS: Windows 11 Home

I'm trying use laravel-mix a no Laravel project.

Running the "npx mix" return a error in lines comments on .css files.

"dependencies": {
    "@popperjs/core": "2.9.2",
    "bootstrap": "5.0.2",
    "cross-env": "7.0.3",
    "laravel-mix": "6.0.25",
    "webpack": "5.45.1"
  },
  "devDependencies": {
    "resolve-url-loader": "^4.0.0",
    "sass": "^1.35.2",
    "sass-loader": "^12.1.0"
  }

[JeffreyWay]

What's your webpack.mix.js file look like?

[Andrelirasp]

``
// webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/js/app.js', 'js')
.sass('src/css/app.scss', 'css')
.setPublicPath('dist');

[gaetandezeiraud]

Same problem without sass but with Tailwindcss.

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
    at validate (C:\laragon\www\dezeiraud\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (C:\laragon\www\dezeiraud\node_modules\webpack\lib\NormalModule.js:527:19)
    at Object.loader (C:\laragon\www\dezeiraud\node_modules\css-loader\dist\index.js:31:27)
    at processResult (C:\laragon\www\dezeiraud\node_modules\webpack\lib\NormalModule.js:701:19)
    at C:\laragon\www\dezeiraud\node_modules\webpack\lib\NormalModule.js:807:5
    at C:\laragon\www\dezeiraud\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at C:\laragon\www\dezeiraud\node_modules\loader-runner\lib\LoaderRunner.js:251:18

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 2 errors

And webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .copy('resources/img', 'public/img')
    .copy('resources/static', 'public')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

[noogen]

Not sure about the author issue, but @Brouilles might be a css-loader version issue. ref #3036

[gaetandezeiraud]

Yes I confirm. It is a css-loader issue. If I set to version 5.x, it is working again!

[ankurk91]

This is happening due to npm v7.x, which auto installs peer dependency listed in vue-loader/package.json

• Laravel mix requires css-loader v5
• but vue-loader install css-loader v6 through peer-dependency

Larave mix should load webpack loaders like this -

 {
      loader: require.resolve('css-loader'),
      options: {
        modules: false,
        esModule: true,
        importLoaders: 2,
      }
    },

This will force node to resolve the css-loader child package (in this case v5) which was installed along with the parent package itself.

See how other packages is doing this
symfony/webpack-encore#739

[thecrypticace]

gah this is really aggravating that we have to do this but it makes sense. I'll see if I can go through and update things tonight and get a release out soon