Compatibility with sass-loader 8.0.0

danielbachhuber commented 5 years ago

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

it-can commented 5 years ago

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 commented 5 years ago

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:

⚠ BREAKING CHANGES [...]

move all sass (includePaths, importer, functions) options to the sassOptions option.

it-can commented 5 years ago

can someone create a PR?

sergeifilippov commented 5 years ago

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 commented 5 years ago

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

sergeifilippov commented 5 years ago

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

hotrush commented 5 years ago

@sergeifilippov confirmed, switching to node-sass helped

patrickcarlohickman commented 5 years ago

@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.

hotrush commented 5 years ago

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

tofikhidayatxyz commented 5 years ago

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

sergeifilippov commented 5 years ago

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 commented 5 years ago

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

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

jinxkitt108 commented 5 years ago

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:\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 commented 5 years ago

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 commented 5 years ago

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.

Nothing-Works commented 5 years ago

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

bedus-creation commented 5 years ago

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

Indeed

sergeifilippov commented 5 years ago

This has been fixed with v5.0.0

bedus-creation commented 5 years ago

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.

UbaidillahGit commented 4 years ago

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

thanks it's really work !

FaycalBorsali commented 4 years ago

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

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

Wildindfw commented 4 years ago

npm install --save-dev sass-loader@7.1.0

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 commented 4 years ago

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