1

Any one have idea How to compile SCSS to CSS in Magento2

2

you can follow these steps to compile files with Gulp:

1.In magento root directory, create an empty package.json and copy-paste the following code:

 {
 "author": "Magento Commerce Inc.",
 "description": "Magento node modules dependencies for local 
 development",
 "version": "1.0.0",
 "main": "gulpfile.js",
 "dependencies": {
 "path": "^0.12.7"
 },
 "devDependencies": {
 "gulp": "^3.9.1",
 "gulp-notify": "^3.0.0",
 "gulp-plumber": "^1.1.0",
 "gulp-sass": "^3.1.0"
 },
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 }
}

2.Install Gulp by running the following command in a command prompt:

npm install --save gulp-install

3.Add the gulp-sass package for the Sass preprocessor by running the following command:

npm install gulp-sass

4.Create an empty gulpfile.js in your magento root directory and copy this code :

var gulp     = require('gulp'),
sass         = require('gulp-sass'),
plumber      = require('gulp-plumber'),
notify       = require('gulp-notify');

var config = {
src           : 'app/code/frontend/<Vendor>/<theme>/web/css/*.scss',
dest          : 'app/code/frontend/<Vendor>/<theme>/web/css/'
};

// Error message
var onError = function (err) {
notify.onError({
title   : 'Gulp',
subtitle: 'Failure!',
message : 'Error: <%= error.message %>',
sound   : 'Beep'
})(err);

this.emit('end');
};

// Compile CSS
 gulp.task('styles', function () {
 var stream = gulp
.src([config.src])
.pipe(plumber({errorHandler: onError}))
.pipe(sass().on('error', sass.logError));

return stream
.pipe(gulp.dest('app/code/frontend/<Vendor>/<theme>/web/css/'));
})

5.create a scss file in the app/design/frontend/Vendor/theme/web/css/ directory.

6.Declare the resulting CSS file in the default_head_blocks.xml file in the app/design/frontend/Vendor/theme/Magento_Theme/layout/

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/styles.css"/>
    </head>
</page>

7.cd magento_root_directory and run gulp styles

(the generated CSS styles.css in the app/code/frontend/Vendor/theme/web/css directory)

I hope my answer was clear. Good luck and happy coding !!!

  • 1
    I know how to compile Less to CSS . My question is how to compile SCSS to CSS in magento2 – hweb87 Aug 14 '18 at 10:12
  • @hweb87 sorry i updated my answer you can check – sami23 Aug 14 '18 at 10:48
  • Error when run npm install --save gulp-install npm ERR! code EJSONPARSE npm ERR! Failed to parse json npm ERR! Unexpected token npm ERR! in JSON at position 99 while parsing '{ npm ERR! "author": "Magento Commerce Inc.", npm ERR! "' npm ERR! File: /var/www/html/projectname/package.json npm ERR! Failed to parse package.json data. npm ERR! package.json must be actual JSON, not just JavaScript. npm ERR! npm ERR! Tell the package author to fix their package.json file. JSON.parse – hweb87 Aug 14 '18 at 11:13
  • try to run npm cache clean before run npm install --save gulp-install – sami23 Aug 14 '18 at 11:34
  • I have added error in comment – hweb87 Aug 14 '18 at 11:38
0

This entirely depends on how it has been implemented it usually varies between:

I would start off with installing Vanilla Sass and compiling with that, if you have errors I suspect it's a different method. To determine which one look for files such as gulpfile.js, config.rb, packages.json.

Welcome to the over-complicated world of front-end!

  • Hi @Ben thanks for reply, Is there any detailed documentation for that ? – hweb87 Aug 14 '18 at 10:13
  • For which one? If you click on the links I gave you there is documentation for each method. I can't find any guide on how to find out which method is used :( I could only confirm which method you need if I had visibility of the codebase. – Ben Crook Aug 14 '18 at 10:20
  • We have purchased templatemonster.com/demo/62081.html this theme and it's in Magento ver. 2.2.4. I just want to know if I will change in SCSS thene how it's compile in CSS. In Less I have run bin/magento set:up and it''s working fine – hweb87 Aug 14 '18 at 10:28
  • Hi Ben are you available in Slack ? – hweb87 Aug 14 '18 at 10:30
  • I will be in around 30 minutes, feel free to message me if you're on any of the Magento Slack groups and I'll get back to you when I'm free. – Ben Crook Aug 14 '18 at 10:33
0

Getting below error after run gulp styles /var/www/html/projectname/node_modules/node-sass/lib/binding.js:15 throw new Error(errors.missingBinary()); ^ Error: Missing binding /var/www/html/projectname/node_modules/node-sass/vendor/linux-x64-57/binding.node Node Sass could not find a binding for your current environment: Linux 64-bit with Node.js 8.x Found bindings for the following environments: - Linux 64-bit with Node.js 9.x This usually happens because your environment has changed since runningnpm install. Runnpm rebuild node-sassto download the binding for your current environment. at module.exports (/var/www/html/projectname/node_modules/node-sass/lib/binding.js:15:13) at Object.<anonymous> (/var/www/html/projectname/node_modules/node-sass/lib/index.js:14:35) at Module._compile (module.js:652:30) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18) at Object.<anonymous> (/var/www/html/projectname/node_modules/gulp-sass/index.js:187:21)

  • npm rebuild node-sass and try again – sami23 Aug 14 '18 at 11:50
0

It's successfully compiled but can't changes in frontend

gulp style

[14:11:30] Using gulpfile /var/www/html/projectname/gulpfile.js
[14:11:30] Starting 'style'...
[14:11:30] Finished 'style' after 37 ms
  • try to run php bin/magento setup:static-content:deploy -f – sami23 Aug 16 '18 at 9:45
  • Not working, but now process are correct, Right ? – hweb87 Aug 16 '18 at 10:03
  • did you check under if your compiled file is generated under pub/static/frontend/../../../css/? – sami23 Aug 16 '18 at 10:08
  • the process is correct refer to devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/… – sami23 Aug 16 '18 at 10:14
  • Yes, But can't know why changes are not affect in frontend I have changed in app/design/frontend/TemplateMonster/theme021/web/css/source/components/_rd-navbar.scss but changes are not complied in app/design/frontend/TemplateMonster/theme021/web/css/style.css – hweb87 Aug 16 '18 at 10:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.