Compatibility with sass-loader 8.0.0 #2206

danielbachhuber · 2019-08-29T16:24:24Z

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 danielbachhuber/simple-event-tracking#3

it-can · 2019-08-30T08:17:49Z

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

Xenonym · 2019-08-31T04:09:16Z

node-sass@8.0.0 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:

it-can · 2019-09-02T09:21:43Z

can someone create a PR?

sergeifilippov · 2019-09-04T03:15:02Z

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.

jeshusho · 2019-09-04T04:08:03Z

I solved this incident by doing the following:
npm uninstall --save-dev sass-loader
npm install --save-dev sass-loader@7.1.0

sergeifilippov · 2019-09-04T05:05:17Z

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')})
...

hotrush · 2019-09-10T20:28:16Z

@sergeifilippov confirmed, switching to node-sass helped

patrickcarlohickman · 2019-09-10T20:28:24Z

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

hotrush · 2019-09-10T20:43:28Z

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

tofikhidayatxyz · 2019-09-11T01:25:11Z

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

sergeifilippov · 2019-09-11T04:51:45Z

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 👍

jinxkitt108 · 2019-09-11T15:50:27Z

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

jinxkitt108 · 2019-09-11T15:52:57Z

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:\wamp64\www\sfawsdev.j\resources\js'
@ ./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:\wamp64\www\sfawsdev.j\resources\js'
@ ./resources/js/routes.js 3:0-39 11:15-19
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

HDVinnie · 2019-09-12T19:56:55Z

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

robbyrice · 2019-09-13T17:27:35Z

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.

bedus-creation · 2019-09-24T07:25:19Z

Indeed

sergeifilippov · 2019-09-24T22:44:02Z

This has been fixed with v5.0.0

bedus-creation · 2019-09-25T04:31:36Z

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

@8

…* instead of @8 due to error laravel-mix/laravel-mix#2206

NOTE that `sass-loader` needs to stay at v.7. Upgrading Laravel Mix past v4 can break with sass-loader v.8. laravel-mix/laravel-mix#2206

UbaidillahGit · 2020-02-16T17:59:03Z

thanks it's really work !

FaycalBorsali · 2020-02-17T08:26:52Z

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

Wildindfw · 2020-02-23T08:04:43Z

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:\Users\cjord\AppData\Roaming\npm-cache_logs\2020-02-23T08_04_13_205Z-debug.log

IOIIOOIO · 2020-06-24T21:50:47Z

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
    });

hosseinazeemi · 2020-07-15T08:14:32Z

Thank you it worked for me !

AyoAyomide · 2020-09-28T09:37:16Z

thanks really works

Jleagle · 2020-10-13T12:49:37Z

sass-loader@7.1.0 was released on 2018-08-01 so downgrading that far can't be a good solution.

seyfer · 2021-08-13T09:05:12Z

what is the most recent solution?

dshoreman mentioned this issue Sep 15, 2019

Update to support sass-loader 8.x #2223

Merged

JeffreyWay closed this as completed in #2223 Sep 16, 2019

essj pushed a commit to essj/portfolio that referenced this issue Sep 30, 2019

Upgrade all packages where possible. Downgrade sass-loader back to @7.…

0cc22fa

…* instead of @8 due to error laravel-mix/laravel-mix#2206

allanwhite pushed a commit to daticahealth/Datica-V3 that referenced this issue Nov 1, 2019

Font stuff; updated packages

eb48a27

NOTE that `sass-loader` needs to stay at v.7. Upgrading Laravel Mix past v4 can break with sass-loader v.8. laravel-mix/laravel-mix#2206

marcialwushu mentioned this issue Apr 22, 2020

module build failed validationError invalid options object Sass loader marcialwushu/VuejsByExample#5

Open

sbarbat mentioned this issue May 8, 2020

Laravel version 6.18.8 Chatter-Laravel/core#15

Closed

thisXY mentioned this issue Nov 9, 2020

能不能支持sass呢，急求~ umijs/father#268

Closed

phpguru mentioned this issue Mar 27, 2021

Google Font's @import statenent is breaking after compiling from SCSS to CSS #2430

Closed

seyfer mentioned this issue Aug 13, 2021

resolve-url-loader cannot operate: CSS error when using @apply tailwindlabs/tailwindcss#48

Closed

kohey mentioned this issue Sep 5, 2021

Build Complete takes too long time on M1 chip Machine nuxt/nuxt#9758

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compatibility with sass-loader 8.0.0 #2206

Compatibility with sass-loader 8.0.0 #2206

danielbachhuber commented Aug 29, 2019

it-can commented Aug 30, 2019

Xenonym commented Aug 31, 2019

it-can commented Sep 2, 2019

sergeifilippov commented Sep 4, 2019 •

edited

jeshusho commented Sep 4, 2019

sergeifilippov commented Sep 4, 2019 •

edited

hotrush commented Sep 10, 2019

patrickcarlohickman commented Sep 10, 2019 •

edited

hotrush commented Sep 10, 2019

tofikhidayatxyz commented Sep 11, 2019

sergeifilippov commented Sep 11, 2019

jinxkitt108 commented Sep 11, 2019

jinxkitt108 commented Sep 11, 2019

HDVinnie commented Sep 12, 2019

robbyrice commented Sep 13, 2019

bedus-creation commented Sep 24, 2019

sergeifilippov commented Sep 24, 2019

bedus-creation commented Sep 25, 2019

UbaidillahGit commented Feb 16, 2020

FaycalBorsali commented Feb 17, 2020

Wildindfw commented Feb 23, 2020

IOIIOOIO commented Jun 24, 2020 •

edited

hosseinazeemi commented Jul 15, 2020

AyoAyomide commented Sep 28, 2020

Jleagle commented Oct 13, 2020

seyfer commented Aug 13, 2021

Compatibility with sass-loader 8.0.0 #2206

Compatibility with sass-loader 8.0.0 #2206

Comments

danielbachhuber commented Aug 29, 2019

Description:

Steps To Reproduce:

it-can commented Aug 30, 2019

Xenonym commented Aug 31, 2019

it-can commented Sep 2, 2019

sergeifilippov commented Sep 4, 2019 • edited

jeshusho commented Sep 4, 2019

sergeifilippov commented Sep 4, 2019 • edited

hotrush commented Sep 10, 2019

patrickcarlohickman commented Sep 10, 2019 • edited

hotrush commented Sep 10, 2019

tofikhidayatxyz commented Sep 11, 2019

sergeifilippov commented Sep 11, 2019

jinxkitt108 commented Sep 11, 2019

jinxkitt108 commented Sep 11, 2019

HDVinnie commented Sep 12, 2019

robbyrice commented Sep 13, 2019

bedus-creation commented Sep 24, 2019

sergeifilippov commented Sep 24, 2019

bedus-creation commented Sep 25, 2019

UbaidillahGit commented Feb 16, 2020

FaycalBorsali commented Feb 17, 2020

Wildindfw commented Feb 23, 2020

IOIIOOIO commented Jun 24, 2020 • edited

hosseinazeemi commented Jul 15, 2020

AyoAyomide commented Sep 28, 2020

Jleagle commented Oct 13, 2020

seyfer commented Aug 13, 2021

sergeifilippov commented Sep 4, 2019 •

edited

sergeifilippov commented Sep 4, 2019 •

edited

patrickcarlohickman commented Sep 10, 2019 •

edited

IOIIOOIO commented Jun 24, 2020 •

edited