Laravel-mix: Compatibility with sass-loader 8.0.0

Created on 29 Aug 2019  ·  26Comments  ·  Source: JeffreyWay/laravel-mix
  • Laravel Mix Version: 4.1.2

Description:

A heads up that Laravel mix doesn't seem to be compatible with sass-loader 8.0.0 (just released) which has some breaking changes.

Steps To Reproduce:

See build failure in https://github.com/danielbachhuber/simple-event-tracking/pull/3

picture danielbachhuber
👍32

Most helpful comment

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

picture jeshusho on 4 Sep 2019
👍117 ❤46 🚀33 🎉32 😄29 👀12

All 26 comments

getting this error:

ERROR in ./resources/assets/scss/fontawesome.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/test/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
    at Object.loader (/test/node_modules/sass-loader/dist/index.js:36:28)
    at /test/node_modules/webpack/lib/NormalModule.js:313:20
    at /test/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /test/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/test/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/test/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /test/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at /test/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15
    at processTicksAndRejections (internal/process/task_queues.js:75:11)
 @ ./resources/assets/scss/fontawesome.scss
it-can picture it-can on 30 Aug 2019

[email protected] changed the format of its options object such that all node-sass/dart-sass options are now in a sassOptions property instead of being directly in the options object itself:

⚠ BREAKING CHANGES
[...]

  • move all sass (includePaths, importer, functions) options to the sassOptions option.
Xenonym picture Xenonym on 31 Aug 2019

can someone create a PR?

it-can picture it-can on 2 Sep 2019

What's a work around?

Changing package.json valus "sass-loader": "^7.0.0", now throws the following after npm run dev:

ERROR in ./src/css/scss/site.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Dart Sass version 1.23.0-module.beta.1 is incompatible with ^1.3.0.
sergeifilippov picture sergeifilippov on 4 Sep 2019
👍3

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

jeshusho picture jeshusho on 4 Sep 2019
👍117 ❤46 🚀33 🎉32 😄29 👀12

What's a work around?

Changing package.json valus "sass-loader": "^7.0.0", now throws the following after npm run dev:

ERROR in ./src/css/scss/site.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Error: Dart Sass version 1.23.0-module.beta.1 is incompatible with ^1.3.0.

A workaround for now is switching back to using node-sass.

Install node-sass

npm install --save-dev node-sass
yarn add node-sass

In webpack.mix.js

...
mix.sass(`${_src}/css/scss/app.scss`, `${_dist}/css`, {implementation: require('node-sass')})
...
sergeifilippov picture sergeifilippov on 4 Sep 2019
👍6

@sergeifilippov confirmed, switching to node-sass helped

hotrush picture hotrush on 10 Sep 2019

@sergeifilippov Dart sass accidentally released their 1.23 beta version as the latest version (https://github.com/sass/dart-sass/issues/818). If you update your package.json to target "sass": "^1.22.10", that'll fix your specific issue.

patrickcarlohickman picture patrickcarlohickman on 10 Sep 2019
👍2

@patrickcarlohickman that also works, but for me spawns lot of warnings)

hotrush picture hotrush on 10 Sep 2019

I tried to return the sass loader to version 7 and it worked

tofikhidayatxyz picture tofikhidayatxyz on 11 Sep 2019
👍2

Switched back to using dart-sass by:

A workaround for now is switching back to using node-sass.

Remove node-sass

npm remove --save-dev node-sass
yarn remove node-sass

In webpack.mix.js

...
mix.sass(${_src}/css/scss/app.scss, ${_dist}/css)
...

So far no issues 👍

sergeifilippov picture sergeifilippov on 11 Sep 2019

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

can i see your webpack.mix.js codes.. i am having hard time using Vuetify 2

jinxkitt108 picture jinxkitt108 on 11 Sep 2019

Switched back to using dart-sass by:

A workaround for now is switching back to using node-sass.

Remove node-sass

npm remove --save-dev node-sass
yarn remove node-sass

In webpack.mix.js

...
mix.sass(${_src}/css/scss/app.scss, ${_dist}/css)
...

So far no issues 👍

i am using vuetify 2 and im having issues with this webpack.mix.js set up.

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

mix.webpackConfig({
resolve: {
extensions: ['.js', '.vue'],
alias: {
'@': __dirname + '/resources'
}
}

});

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');

im getting error......

ERROR in ./resources/js/routes.js
Module not found: Error: Can't resolve '@js/components/About' in 'C:wamp64wwwsfawsdev.jresourcesjs'
@ ./resources/js/routes.js 4:0-41 15:15-20
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

ERROR in ./resources/js/routes.js
Module not found: Error: Can't resolve '@js/components/Home' in 'C:wamp64wwwsfawsdev.jresourcesjs'
@ ./resources/js/routes.js 3:0-39 11:15-19
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

jinxkitt108 picture jinxkitt108 on 11 Sep 2019

Also facing this issue.

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 |
 */

mix.version()
    /*
     * Sourced asset dependencies via node_modules and JS bootstrapping
     */
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .generateIntegrityHash()

    /*
     * Themes
     *
     * Note: Default wysibb theme is compiled into public/css/app.css from resources/sass/app.scss
     *
     */
    .sass('resources/sass/themes/galactic.scss', 'public/css/themes/galactic.css')
    .sass('resources/sass/themes/dark-blue.scss', 'public/css/themes/dark-blue.css')
    .sass('resources/sass/themes/dark-green.scss', 'public/css/themes/dark-green.css')
    .sass('resources/sass/themes/dark-pink.scss', 'public/css/themes/dark-pink.css')
    .sass('resources/sass/themes/dark-purple.scss', 'public/css/themes/dark-purple.css')
    .sass('resources/sass/themes/dark-red.scss', 'public/css/themes/dark-red.css')
    .sass('resources/sass/themes/dark-teal.scss', 'public/css/themes/dark-teal.css')
    .sass('resources/sass/themes/dark-yellow.scss', 'public/css/themes/dark-yellow.css')
    .generateIntegrityHash()

    /*
     * Login and TwoStep Auth styles
     *
     * We compile each of these separately since they should only be loaded with the certain views
     *
     * Note: These will likely be reworked into VueJS component(s)
     */
    .sass('resources/sass/main/login.scss', 'public/css/main/login.css')
    .sass('resources/sass/main/twostep.scss', 'public/css/main/twostep.css')
    .generateIntegrityHash()

    /*
     * Here we take all these scripts and compile them into a single 'unit3d.js' file that will be loaded after 'app.js'
     *
     * Note: The order of this array will matter, no different then linking these assets manually in the html
     */
    .babel(['resources/js/unit3d/hoe.js', 'resources/js/unit3d/custom.js', 'resources/js/unit3d/helper.js'], 'public/js/unit3d.js')

    /*
     * Copy emojione assets
     */
    .copy('node_modules/emojione-assets/png/64', 'public/img/joypixels');

// Full API
// mix.js(src, output);
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.less(src, output);
// mix.combine(files, destination);
// mix.copy(from, to);
// mix.minify(file);
// mix.sourceMaps(); // Enable sourcemaps
// mix.version(); // Enable versioning.
// mix.disableNotifications();
// mix.setPublicPath('path/to/public');
// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.

When running nom run prod

error  in ./resources/sass/themes/galactic.scss

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'outputStyle'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/var/www/html/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:49:11)
    at Object.loader (/var/www/html/node_modules/sass-loader/dist/index.js:36:28)
    at runLoaders (/var/www/html/node_modules/webpack/lib/NormalModule.js:315:20)
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at runSyncOrAsync (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:143:3)
    at iterateNormalLoaders (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at process.nextTick (/var/www/html/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

and so on

HDVinnie picture HDVinnie on 12 Sep 2019

A quick and dirty work-around to this is to edit the src/components/Sass.js file and change the following function from this

pluginOptions(pluginOptions) {
    return Object.assign(
        {
            precision: 8,
            outputStyle: 'expanded',
            implementation: () =>
                Mix.seesNpmPackage('node-sass')
                    ? require('node-sass')
                    : require('sass')
        },
        pluginOptions,
        { sourceMap: true }
    );
}

to this

pluginOptions(pluginOptions) {
    return {sassOptions: Object.assign(
        {
            precision: 8,
            outputStyle: 'expanded',
            implementation: () =>
                Mix.seesNpmPackage('node-sass')
                    ? require('node-sass')
                    : require('sass')
        },
        pluginOptions,
        { sourceMap: true }
    )};
}

If you go this route it means that this change will most likely be over-ridden with future updates to laravel-mix. However, any future updates will hopefully provide compatibility with sass-loader 8 so this shouldn't be a problem.

robbyrice picture robbyrice on 13 Sep 2019

same problem here, have to roll back to 7.x versions.

Nothing-Works picture Nothing-Works on 16 Sep 2019
👍5

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

Indeed

bedus-creation picture bedus-creation on 24 Sep 2019

This has been fixed with v5.0.0

sergeifilippov picture sergeifilippov on 25 Sep 2019

This has been fixed with v5.0.0

Yeah, But I have been using laravel-mix v3, as v4 and V5 has issue with dynamic import.

bedus-creation picture bedus-creation on 25 Sep 2019
👍4

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

thanks it's really work !

ubaidillahSriyudi picture ubaidillahSriyudi on 16 Feb 2020
👍3

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

Thank yous it worked for me !
But is it a permanent solution or just a quick workaround ?

FaycalBorsali picture FaycalBorsali on 17 Feb 2020

npm install --save-dev [email protected]

I got this

npm ERR! Cannot read property 'match' of undefined

npm ERR! A complete log of this run can be found in:
npm ERR! C:UserscjordAppDataRoamingnpm-cache_logs2020-02-23T08_04_13_205Z-debug.log

Wildindfw picture Wildindfw on 23 Feb 2020

I'm having this same issue. Downgrading to sass-loader 7.1 worked for me.

sass-loader: 8.0.2
laravel-mix: 5.0.4

webpack.mix.js:

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css', {
       precision : 5
    });
IOIIOOIO picture IOIIOOIO on 24 Jun 2020

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

Thank you it worked for me !

hosseinazeemi picture hosseinazeemi on 15 Jul 2020

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev [email protected]

thanks really works

AyoAyomide picture AyoAyomide on 28 Sep 2020

[email protected] was released on 2018-08-01 so downgrading that far can't be a good solution.

Jleagle picture Jleagle on 13 Oct 2020
👍11
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dtheb picture dtheb  ·  3Comments
rlewkowicz picture rlewkowicz  ·  3Comments
stefensuhat picture stefensuhat  ·  3Comments
hasnatbabur picture hasnatbabur  ·  3Comments
rderimay picture rderimay  ·  3Comments