Any one have idea How to compile SCSS to CSS in Magento2
Add a comment
|
4 Answers
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 !!!
-
1I know how to compile Less to CSS . My question is how to compile SCSS to CSS in magento2Hitesh Koshti– Hitesh Koshti2018-08-14 10:12:49 +00:00Commented Aug 14, 2018 at 10:12
-
@hweb87 sorry i updated my answer you can checksami23– sami232018-08-14 10:48:17 +00:00Commented Aug 14, 2018 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.parseHitesh Koshti– Hitesh Koshti2018-08-14 11:13:42 +00:00Commented Aug 14, 2018 at 11:13
-
try to run npm cache clean before run npm install --save gulp-installsami23– sami232018-08-14 11:34:50 +00:00Commented Aug 14, 2018 at 11:34
-
I have added error in commentHitesh Koshti– Hitesh Koshti2018-08-14 11:38:11 +00:00Commented Aug 14, 2018 at 11:38
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 ?Hitesh Koshti– Hitesh Koshti2018-08-14 10:13:51 +00:00Commented Aug 14, 2018 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– Ben Crook2018-08-14 10:20:36 +00:00Commented Aug 14, 2018 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 fineHitesh Koshti– Hitesh Koshti2018-08-14 10:28:26 +00:00Commented Aug 14, 2018 at 10:28
-
Hi Ben are you available in Slack ?Hitesh Koshti– Hitesh Koshti2018-08-14 10:30:25 +00:00Commented Aug 14, 2018 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– Ben Crook2018-08-14 10:33:16 +00:00Commented Aug 14, 2018 at 10:33
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 againsami23– sami232018-08-14 11:50:30 +00:00Commented Aug 14, 2018 at 11:50
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 -fsami23– sami232018-08-16 09:45:10 +00:00Commented Aug 16, 2018 at 9:45
-
Not working, but now process are correct, Right ?Hitesh Koshti– Hitesh Koshti2018-08-16 10:03:31 +00:00Commented Aug 16, 2018 at 10:03
-
did you check under if your compiled file is generated under pub/static/frontend/../../../css/?sami23– sami232018-08-16 10:08:37 +00:00Commented Aug 16, 2018 at 10:08
-
the process is correct refer to devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/…sami23– sami232018-08-16 10:14:47 +00:00Commented Aug 16, 2018 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.cssHitesh Koshti– Hitesh Koshti2018-08-16 10:15:50 +00:00Commented Aug 16, 2018 at 10:15