Canvas Support

SASS Compile Error

4 replies · opened Sep 23, 2022

DdjvallauriSep 23, 2022

When editing and compiling the SASS files I am getting one style.css that loses some of the websites functionality. When I compare the compiled style.css to the original file (the one included in your distribution) I notice that they have a different structure and it is almost impossible to track down where things went wrong.
This is the package.json that I use:
{
"name": "gmiwhip",
"version": "1.0.0",
"description": "gmiwhip",
"main": "index.js",
"scripts": {
"watch:sass": "node-sass style.scss style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass style.scss style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' style.comp.css -o style.prefix.css",
"compress:css": "node-sass style.prefix.css style.css --output-style compressed",
"build:css": "npm-run-all compile:sass prefix:css compress:css"
},
"author": "ADG",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^10.4.7",
"concat": "^1.0.3",
"live-server": "^1.2.2",
"node-sass": "^7.0.1",
"npm-run-all": "^4.1.5",
"postcss-cli": "^9.1.0"
}
}

I created an example with two different style.css files:

  1. the original files from your distribution. Files uploaded at: http://villagemassagedev.co/v0/responsive-sticky.html

  2. modified the $theme-color in sass/_variables.scss and then compiled style.css. Files uploaded at: http://villagemassagedev.co/v0/responsive-sticky.html

You will notice that in the second instance the theme color is indeed changed. But the header is not sticky anymore in the tablet view (when tested on an iPad or Android tablet). Strangely enough it is still sticky in desktop and mobile view.
Also, if you compare the two style.css files' sizes they are quite different even if I only changed one hex code in the sass/_variables.scss file.

Please check and let me know if I am doing something wrong and which would be the correct steps in order to edit the SASS files and get a consistent result.

SSemicolon WebSTAFFSep 25, 2022

Hello,

Apologies for the Inconveniences caused!

We have thoroughly checked the SCSS Files before release and they did not present any issues whatsoever. The SCSS was created after the CSS as Canvas was primarily built with CSS only and then the SCSS conversion happened. Many Users use the SCSS Version of Canvas but they have not reported any issues as of yet and any issues reported were promptly fixed. Please allow us some time while we are thoroughly checking this issue and we will provide you with the solution shortly. Thanks for your Kind Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

DdjvallauriSep 25, 2022

It would be great if in the meantime you could share your method of working with the SASS files. A workflow, what environment to set up, maybe a package.json sample that you used and gave good results.

SSemicolon WebSTAFFSep 30, 2022

Hello,

Thanks for your Kind Patience!

We have checked this and yes there was a minor error with the Header Sticky on Devices less than 992px. We really apologize for the inconveniences caused and fix this issue. We have attached the _header.scss File here so you can simply replace it and run the compile again.

Also we use GULP, so we are attaching the gulpfile.js and package.json files here. You can consider using them according to your needs but since we do not provide these files in the Package, no further support will be available for this. Thanks for your Understanding.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard