Magento2 : How to compile SCSS to CSS in Ubuntu

magento.stackexchange https://magento.stackexchange.com/questions/238300

Pregunta

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

¿Fue útil?

Solución 3

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)

Otros consejos

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 !!!

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!

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
Licenciado bajo: CC-BY-SA con atribución
No afiliado a magento.stackexchange
scroll top