Displaying Different SCSS Path in Browser. SASS/SCSS First Time Please help.

Envato Authors Theme Authors
1

Hi, We are trying SASS/SCSS First Time Please help.
when i selected card div in html as shown in image screen-1 and the card related styles are shown in right style tab. the actual card styles are present in _card.scss bt it shows _form.scss how can i fix this issue[enter image description here][1]

Screenshots:

2

Hi,

That class = card css come from form.scss you have to cut that sass code from form.scss to card.scss then it will works well.

Let me know i will try to hep you i know scss/sass.

Best Regards.

3

What’s on line 33 of _forms.scss?

4

Hi, Actually .card styles in cards.scss only. But in browser showing froms.scss. We have checked froms.scss cards styles not there.

I designer first css files only after developing my developer tying to using some converters CSS to SASS. Finally any any scc styles change css also dynamically changed but brouser showing different path. So we have stuck sass development. We don’t have experience with sass our developers following online learning tools. Please help.

5

Capture
Capture1396×465 64.4 KB

6

Can you try after removing your browser cache or different browser?

1 Like
7

Capture
Capture1327×348 30.9 KB
Capture2
Capture2557×804 29.3 KB

Firefox showing different.

8

Hi, i am ready to payment for this. please tel me solution. Can i pay before ? paypal ?

9

Hi, Can you help me please.

10

Sorry, I was away for a bit.

How are you compiling the SCSS? Are you using a build system like Gulp? A bundler like Webpack? A desktop application?

@unlockdesign’s had an excellent suggestion, try clearing your cache on Chrome first. Bugs in sourcemaps due to cache aren’t unheard of.

11

We are using Gulp. Firefox is showing different & chrome are are displaying different.
Please check this link inspect card after click scss file.
Actually we are created first css file. after we are converter css to scss with using gulp.

https://html.spruko.com/rapo/Demo/Demo-1/dashboard/leftmenu/

12

Yeah, I see it too. Can you post the code for the Gulp task which compiles your SCSS?

13

Sorry . I don’t know my developer trying to develop CSS to SCSS. After this issue created. this time developer not available. i will replay back tomorrow. If possible please can you help me. this 1 issue after fix after my team are very strong.

14

If you have a CSS code in first place why don’t you use PostCSS instead of SCSS? It has the same features such as variables, nesting and modules. And it’s very easy to setup.

I also had the same problem with a wrong SCSS path before, but I forgot how I solved it :slight_smile: Try deleting source map file and reload the browser with clear cache.

1 Like
15

source map required for SCSS ? All user are following this ?
You are also using sourceMap ?

https://deothemes.com/envato/margin/html/css/style.css

/*# sourceMappingURL=style.css.map */

16

Can you show your scss file mapping ?

17

source map required for SCSS ? All user are following this ?
You are also using sourceMap ?

https://deothemes.com/envato/margin/html/css/style.css

/*# sourceMappingURL=style.css.map */

18

Not style.css!
Scss file map

19

What “Deo Themes” also called style.css!

https://deothemes.com/envato/margin/html/css/style.css

/*# sourceMappingURL=style.css.map */

20

var gulp = require(“gulp”),
sass = require(“gulp-sass”),
postcss = require(“gulp-postcss”),
autoprefixer = require(“autoprefixer”),
cssnano = require(“cssnano”),
var browserSync = require(‘browser-sync’).create();
var reload = browserSync.reload;
sourcemaps = require(“gulp-sourcemaps”);

function style() {
return (
gulp
.src(“Demo-1/assets/scss/*.scss”)
.pipe(sourcemaps.init())
.pipe(sass())
.on(“error”, sass.logError)
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(sourcemaps.write())
.pipe(gulp.dest(“Demo-1/assets/css/”))
);
}

function watch() {
gulp.watch(‘Demo-1/assets/scss/*.scss’, style)
}

function watch() {
browserSync.init({
server:{
baseDir:’./Demo-1’
}
});

gulp.watch(’./.html’).on(“change”,reload);
gulp.watch(’./js/**/.js’).on(“change”,reload);
}

exports.watch = watch
exports.default = style;