Webpack-encore: Error: Install sass-loader & node-sass to use enableSassLoader()

Created on 15 Dec 2017 · 8Comments · Source: symfony/webpack-encore

sf2.8
php 7.1
node 9

{
  "devDependencies": {
    "@symfony/webpack-encore": "^0.17.0"
  }
}

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('/var/www/PROD/cdn-store.ibasaw.com/build/')

    .setPublicPath('/build')

    .addEntry('app', [
        './app/themes/Store_1/public/assets/css/custom.css',
        './app/themes/Store_1/public/assets/css/theme.css'
    ])

    .enableSassLoader()

    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    .cleanupOutputBeforeBuild()

    .enableBuildNotifications()

;

module.exports = Encore.getWebpackConfig();

when i execute the command : ./node_modules/.bin/encore dev

Running webpack ...

  Error: Install sass-loader & node-sass to use enableSassLoader()
    yarn add sass-loader node-sass --dev

  - package-helper.js:21 Object.ensurePackagesExist
    [store]/[@symfony]/webpack-encore/lib/package-helper.js:21:11

  - features.js:87 Object.ensurePackagesExist
    [store]/[@symfony]/webpack-encore/lib/features.js:87:23

  - sass.js:23 Object.getLoaders
    [store]/[@symfony]/webpack-encore/lib/loaders/sass.js:23:24

  - config-generator.js:179 ConfigGenerator.buildRulesConfig
    [store]/[@symfony]/webpack-encore/lib/config-generator.js:179:77

  - config-generator.js:52 ConfigGenerator.getWebpackConfig
    [store]/[@symfony]/webpack-encore/lib/config-generator.js:52:29

  - config-generator.js:325 module.exports
    [store]/[@symfony]/webpack-encore/lib/config-generator.js:325:22

  - index.js:748 Object.getWebpackConfig
    [store]/[@symfony]/webpack-encore/index.js:748:16

  - index.js:847 Proxy.parameters
    [store]/[@symfony]/webpack-encore/index.js:847:45

  - webpack.config.js:35 Object.<anonymous>
    /var/www/sources/store/webpack.config.js:35:25

  - module.js:660 Module._compile
    module.js:660:30

Source

ibasaw

Most helpful comment

No everyone wants to use yarn, add node-sass and sass-loader to package.json
Here is my example:

  "devDependencies": {
    "@symfony/webpack-encore": "^0.17.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6"
  }

Then update with npm update -D

klodoma on 12 Feb 2018

👍6 ❤1 🎉1

All 8 comments

it does not install dependency automatically like composer for php ?

ibasaw on 15 Dec 2017

Hi @ibasaw,

It does... for the dependencies we chose to include with Encore:

https://github.com/symfony/webpack-encore/blob/bcfbbfd6ab684197b2315f850dcb2db56172ea34/package.json#L28-L50

As you can see, sass-loader and node-sass are not part of these dependencies. The reason is that they are not needed if you don't want to compile sass files (i.e. if you don't call enableSassLoader()).

Lyrkan on 15 Dec 2017

@Lyrkan : ok, got it
nice util as assetic replacement ;)

ibasaw on 15 Dec 2017

😕1

Just to clarify. The first line is the error and the second line is the solution:

Error: Install sass-loader & node-sass to use enableSassLoader()
    yarn add sass-loader node-sass --dev

So, simply run the yarn command and voila! Do so for all remaining errors.

AntoniusGolly on 9 Jan 2018

👍5

No everyone wants to use yarn, add node-sass and sass-loader to package.json
Here is my example:

  "devDependencies": {
    "@symfony/webpack-encore": "^0.17.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6"
  }

Then update with npm update -D

klodoma on 12 Feb 2018

👍6 ❤1 🎉1

i'm continuously trying to resolve given problem and stuck at the same line,please resolve this issue..

C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps>yarn add [email protected] [email protected]
yarn add v1.22.4
[1/4] Resolving packages...
warning node-sass > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning node-sass > node-gyp > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
[2/4] Fetching packages...
warning Pattern ["object-assign@latest"] is trying to unpack in the same destination "C:\Users\satye\AppData\Local\Yarn\Cache\v6\npm-object-assign-4.1.1-2109adc7965887cfc05cbbd442cac8bfbb360863-integrity\node_modules\object-assign" as pattern ["object-assign@^4.1.0","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.1.0","object-assign@^4","object-assign@^4.1.1","object-assign@^4.1.1","object-assign@^4.1.1","object-assign@^4.1.1","object-assign@^4.0.1","object-assign@^4.1.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.0.1","object-assign@^4.1.0"]. This could result in non-deterministic behavior, skipping.
info [email protected]: The platform "win32" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0".
warning " > [email protected]" has incorrect peer dependency "react-dom@^0.14.0 || ^15.0.0".
[4/4] Building fresh packages...
[-/3] ⡀ waiting...
[-/3] ⢀ waiting...
error C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modulesnode-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modulesnode-sass
Output:
Building: C:\Program Files\nodejs\node.exe C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli 'C:\Program Files\nodejs\node.exe',
gyp verb cli 'C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\node-gyp\bin\node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | win32 | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb which failed Error: not found: python2
gyp verb which failed at getNotFoundError (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:13:12)
gyp verb which failed at F (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:68:19)
gyp verb which failed at E (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:80:29)
gyp verb which failed at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:89:16
gyp verb which failed at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:171:21)
gyp verb which failed python2 Error: not found: python2
gyp verb which failed at getNotFoundError (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:13:12)
gyp verb which failed at F (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:68:19)
gyp verb which failed at E (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:80:29)
gyp verb which failed at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_moduleswhichwhich.js:89:16
gyp verb which failed at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\isexe\index.js:42:5
gyp verb which failed at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\isexe\windows.js:36:5
gyp verb which failed at FSReqCallback.oncomplete (fs.js:171:21) {
gyp verb which failed stack: 'Error: not found: python2\n' +
gyp verb which failed ' at getNotFoundError (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\which\which.js:13:12)\n' +
gyp verb which failed ' at F (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\which\which.js:68:19)\n' +
gyp verb which failed ' at E (C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\which\which.js:80:29)\n' +
gyp verb which failed ' at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\which\which.js:89:16\n' +
gyp verb which failed ' at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\isexe\index.js:42:5\n' +
gyp verb which failed ' at C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\isexe\windows.js:36:5\n' +
gyp verb which failed ' at FSReqCallback.oncomplete (fs.js:171:21)',
gyp verb which failed code: 'ENOENT'
gyp verb which failed }
gyp verb check python checking for Python executable "python" in the PATH
gyp verb which succeeded python C:\Users\satye\AppData\Local\Programs\Python\Python37-32\python.EXE
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\satye\AppData\Local\Programs\Python\Python37-32\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (child_process.js:303:12)
gyp ERR! stack at ChildProcess.emit (events.js:315:20)
gyp ERR! stack at maybeClose (internal/child_process.js:1026:16)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
gyp ERR! System Windows_NT 10.0.17763
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd C:\Users\satye\OneDrive\Desktop\react-projects\indecesion-apps\node_modulesnode-sass
gyp ERR! node -v v13.12.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok

satyendrasingh8 on 5 May 2020

Hi,

You should definitely stop using node-sass for sass (Dart implementation).

Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.

https://sass-lang.com/dart-sass

sass may be a bit slower than node-sass, but you don't have to compile C++ bindings and require Python when installing node-sass. You won't have your CI crashing if you use a newer version of Node.js and node-sass is not compatible with it yet.
I think it's a good trade-off.

For using sass with Encore:

yarn add --dev sass
update your webpack.config.js:

Encore
  .enableSassLoader(options => {
    options.implementation = require('sass');
  })

Kocal on 5 May 2020

❤1 👍1

It worked for me by executing this command in the console: npm i style-resources-loader -D

robertrm0 on 5 Nov 2020

Was this page helpful?

0 / 5 - 0 ratings

Related issues

How to use babel plugins?

MatthD · 4Comments

Symfony 5 with webpack encore : __filename return always "index.js" instead of the name of the executed script file

kegilko · 3Comments

Entry module not found: Error: Can't resolve 'babel-loader'

Aerendir · 4Comments

CKEditor5 custom build problem

wenmingtang · 4Comments

How to use webpack-encore in docker container?

powerlimit · 4Comments