editing scss files doesn't seem to update styles on page

[mbaxter91288]

hello all, not sure if it's me missing something or what, but I have cloned the repo and run 'npm install' from the directory with no issues. However, once running 'gulp serve', when I go to change any scss files gulp seems to run the 'styles' job like it should and the page reloads, but none of the styles change. The gulp file seems to update the '.tmp/styles/*' files correctly, but the reload doesn't then use these files.

Simple example, deleting the entire contents of the 'app/styles/components/components.scss' file and saving seems to run all the gulp tasks and reloads the browser, but all styling stays the same.

Any help would be much appreciated, I'm sure it's something I am doing stupidly wrong.

Many thanks in advance.
Mat

[mbaxter91288]

Taking another look today it seems components.css is being compiled directly into the 'styles/' directory and not the 'styles/components/' directory. It also only seems to update the .tmp css files and not the app/styles css files which mean when I run gulp build it cannot bring through the styling to the dist folder.

Is anyone else having this issue? Any help would be greatly appreciated.

Regards,
Mat

[addyosmani]

Could you let us know if you're experiencing this using the version in master? You can grab it here: https://github.com/google/web-starter-kit/archive/master.zip or clone the repository to get it.

[mbaxter91288]

Thanks for your reply. I've been using the master but downloaded the .zip you mentioned above and still get the same issue. When I made a change to the 'app/styles/components/components.scss' and save everything seems to run and the browser reloads, but when I look in the .tmp folder I have the following:

.tmp/
styles/
components/
components.css
components.css
h5bp.css
main.css

The 'components.css' file that is in the root of the 'styles' folder is being updated upon compilation and not the file in the 'styles/components' folder.

thanks,
Mat

[minnsoe]

@mbaxter91288, building it should replace it with main.min.css so dist shouldn't be a problem.
serve will reference the pre-compiled version so that should give the impression that none of the styles are changing. Checkout my fix, hopefully this is fixes what you're experiencing. Hope it helps.

[michaelx]

I can second the issue.

Changes of _components scss files aren’t updated. I just checked-out the latest master and made a few changes to _button.scss, which however aren’t represented. @minnsoe’s fix doesn’t work for me either.

[minnsoe]

Ok, I've taken a look and this should be a quick fix for it, a97c03e. Not PR worthy at the moment because it breaks the "optional" part of the Web Starter Kit tooling. The components.css file is manually compiled and checked in so it can be used without the tooling.

I'll take a closer look when I have a bit more time. Let me know if it works (or doesn't).

[michaelx]

@minnsoe, unfortunately it doesn’t work for me.

@addyosmani Had you a chance to give it a second look? As said, it’s really easy to reproduce. Just check-out the latest master and make a few changes to _button.scss (like bumping the padding to 64px, font-weight 300 etc.).

[minnsoe]

@michaelx, Did you checkout out this branch double-build-components-fix in my repo?

git checkout double-build-components-fix
gulp serve

If so, when you make a change to a scss file - does it say gulp-size: 'styles' total 0 kB after auto-building?

[michaelx]

@minnsoe It works with your branch, thanks a ton! Hope to have soon an official fix.

[addyosmani]

@minnsoe I plan on doing some more thorough testing against your proposed fix soon. Confirmed this is an issue in master.

[gauntface]

My two cents: there are a number of issues with the scss in the current
release for the style guide. Quite a few were addressed in material branch
(at least I thought they were). Is this not the case?
On 9 Aug 2014 01:29, "Addy Osmani" notifications@github.com wrote:

@minnsoe https://github.com/MinnSoe I plan on doing some more thorough
testing against your proposed fix soon. Confirmed this is an issue in
master.

—
Reply to this email directly or view it on GitHub
#326 (comment)
.

[minnsoe]

@addyosmani In its current form, it breaks the "optional" part of the tooling - a user wouldn't be able to just remove the tooling and have it work without changing references. I would hold off for now, it needs more work.

The material branch looks like it addresses the file organisation, it's probably worth bringing some of it into master.

@gauntface, Is a merge planned for the material branch?

[addyosmani]

@gauntface is currently on vacation, but we plan on bringing in his fixes on his return in a few weeks. If we're confident that's a better way to go I'm happy to defer on us landing other solutions to this problem until that work is in master.

[minnsoe]

@addyosmani, ok. I'll check the gulp tasks in that branch and if it doesn't address the issue - I'll make a patch. I'll probably do this later this week.

[bpampuch]

Is there any reason to keep components.css in styles directory?

I removed this file and provided additional options ({ base: 'app/styles'}) to 'styles' task so it doesn't flatten the directory structure:

gulp.task('styles', function () {
  // For best performance, don't add Sass partials to `gulp.src`
  return gulp.src([
      'app/styles/*.scss',
      'app/styles/**/*.css',
      'app/styles/components/components.scss'
    ], {
        base: 'app/styles'
    })
(...)

Now components.css lands in .tmp/styles/components/ and will be served automatically.

[minnsoe]

@bpampuch, Yeah. The README suggests that you can use it without the tooling so a compiled version needs to be checked-in.

[bluematter]

I am also having this issue, quite frustrating. I am trying many different things to solve it but I cannot figure it out. Hopefully someone knows whats going on.

I just noticed when I make a change to components.scss all the sass changes I made are updated, but when making changes to the modules and components there is no update.

Here is a screenshot when I update _modules, _compontents, _utils, etc the result for 'styles' is 0 bytes, but when I make an update to components.scss (hitting enter to update the file several times) 'styles' is 136.86 kb

[bluematter]

I see what is going on (kind of) I added my own custom _modules and I notice app/styles/components.css does not make any updates, no where in the gulpfile.js is there an action to do that. I do notice however in .tmp/styles/components.css the changes are made.

The index.html file I am working on serves the app/styles/components.css which does not make any changes. When trying to make changes in the components directory the result is 0 B.

So long story short it appears I am using the styling system the WRONG way, I guess if I want to make changes to the components I need to grab the updated .css in the .tmp folder copy and paste it into the app/styles folder's components.css.

In order to leverage live reload I need to make the updates to main.css which takes out the modular design sass brings. I guess I have to add my own sass system correct? Or am I just doing it wrong, my intuition is not on par with this I guess.

[addyosmani]

We're working (in branch) on updating the current Styles (and Sass) setup to be more intuitive. Keep an eye out for the changes in WSK 0.5.0 and 0.6.0 that are going to improve this.

@bluematter The normal workflow here is to make your edits to the Sass files which should then update your CSS accordingly. That is, unless you're just working in CSS and don't want to opt for our Sass files, which we also support. If you're working against the version in master (try it out, even if you don't end up using it) it should include our latest fixes for the livereload setup and any edits to Sass should cause a correct refresh/compile.

[komplexb]

It appears this issue hasn't been resolved universally.
I'm having this exact problem with the latest version I downloaded here: https://github.com/google/web-starter-kit/releases/tag/v0.5.4

[sonicbobcat85]

I'm experiencing the same issue as well, using the latest release of GWST. This renders the kit quite unusable for SASS development. Please advise.

[bluematter]

I can confirm something is wrong with my gulp.js file, after copying the master directly over it works, I added browserify tasks and some other ones, will figure out what is causing it.

[joedajigalo]

Confirmed issue also for me.

Adding styles to main.scss reloads correctly with the changes displaying but if a scss (ie. _partial.scss) file is imported to main.scss and that file has styles added, the browser reloads but the change are not displaying.

However, if you do make changes to the _partial.scss and than write new styles to main.scss, than the styling from _partial.scss displays.

[addyosmani]

I can confirm something is wrong with my gulp.js file, after copying the master directly over it works

Can you confirm that master is working fine for you?

@ joedajigalo does master continue to persist with the issues in your comment too?

[joedajigalo]

@addyosmami yes, just pulled from master last night.

[joedajigalo]

I believe that the issue is since the .scss files are @imported into main.scss, gulp-changed cannot see the updated .scss files?

On line 91 in gulpfile.js, I see .pipe($.changed('.tmp/styles', {extension: '.css'}))

Should we also watch for .scss files in app/styles?
.pipe($.changed('app/styles/**/*', {extension: '.scss'}))

This works - however, it reloads the browser multiple times because of catching the change in the .scss file, and than the catching the change in .css - causing gulp styles task to double the time it takes to finish running.

[bluematter]

After modifying the gulp.js file for browserify somewhere down the line the modifications caused this issue, but I do confirm that after copying the gulp.js file in the master branch it works smooth. I wish I could pinpoint the exact issue but I deleted the faulty code. I re added browserify and it still works great.

I do wish we could work on a browserify branch, because what's better than the ability to keep your js modular, merge all your js dependencies into one minified script? Also when you hook it up to watchify and browser reload, you can develop some pretty awesome things rapidly.

I wish I knew why you guys who are copying from master are having issues, did you (painfully) try to re install your node modules? Maybe completely deleting them is overkill, but a simple npm install might fix things? Did you double check your package.json? Are you cloning a fresh master, or just merging components?

[bluematter]

@joedajigalo since you're doing a pull maybe there is still something wrong locally, because I don't think a pull will fix that. If you made modifications to your gulp.js I would comment it out, put it to the side, copy the master's gulp.js and try that. If that does not work, re install node_modules, try again.

@addyosmani like I mentioned above master works fine, I even did a fresh clone, and that definitely works, I think the people with issues have to have something wrong locally, and I don't think a pull is going to fix it until they identify the issue locally, or get a fresh copy and manually merge their components etc, also I am sure there is also a better way with git, there is always something cool in git I don't know, but I am willing to bet the issue is from a manual change and lives locally.

[sonicbobcat85]

Now it looks like the problem is happening on other GWST projects on the same machine that used to run fine. I haven't made any changes to gulp; maybe node or sass?

UPDATE: I just got it to work. I think it's a node problem (at least in my case). I'll post more info when I have it, in case it helps.

[bluematter]

So as of late I have pulled WSK for many different projects, I notice when I delete all the default modules to add my own that is when the issue starts to occur.

I am not sure how changed works but I think it caches the original modules/components but the new ones are not recognized?

EDIT:

So when I remove this , {extension: '.css'} the partials compile and changes are made, but the total is almost 300kb, which is not bad but does take longer than intended. I am not sure why, but I do know that removing that line is a quick hack.

[addyosmani]

I landed some changes to our build process two days ago which should help with this. Could you pull from master and try again?

[bluematter]

It looks like your solution solved it, the only issue is the styles take about 1mb to compile. I will look further into why, and see if perhaps it's something on my end. I think it's primarily with gulp changed because I am also having issues with changed handlebars templates, I probably am missing something . The idea behind gulp changed is fantastic, but it's causing issues for me, unfortunately.

[bluematter]

gulp-newer works like a charm. I know sindresorhus created gulp-changed but the former works well since its many:1 ie many partials to one build sheet.

[wearenifty]

I had the exact same issue but solved it by adding an additional task to clean out the css before re-compiling. This forces a re-compile of all SASS files which may be inefficient for larger projects but for my purposes works perfectly:

gulp.task('cleanCss', del.bind(null, ['.tmp/styles', 'dist/styles'], {dot: true}));

// Watch files for changes & reload
gulp.task('serve', ['styles', 'jade'], function () {

    browserSync({
        notify: true,
        // Customize the BrowserSync console logging prefix
        logPrefix: 'WSK',
        // Run as an https by uncommenting 'https: true'
        // Note: this uses an unsigned certificate which on first access
        //       will present a certificate warning in the browser.
        // https: true,
        server: ['.tmp', 'app']
    });

    gulp.watch(['app/jade/**/*.jade'], ['jade', reload]);
    gulp.watch(['app/styles/**/*.{scss,css}'], ['cleanCss', 'styles', reload]);
    gulp.watch(['app/js/**/*.js'], ['jshint'], reload);
    gulp.watch(['app/images/**/*'], reload);
});

[PeanutButterCo]

Have the same issue in release 0.5.4. Like @bluematter says, removing , {extension: '.css'} is a quick fix. ¿Is there any problem with this solution?

[nicolasgarnier]

Seems like the issue is caused by gulp-changed not supporting many:1 file transformations.
I'll investigate switching to gulp-newer.

@PeanutButterCo I guess removing , {extension: '.css'} is like removing the whole line. You'll loose the optimization of only processing newer/modified files because the file names never matches (the option is here to tell the plugin that the output of main.scss is main.css)

[PeanutButterCo]

Styles are still not updated when editing any scss file other than main.scss.

[nicolasgarnier]

@PeanutButterCo is right.
Sorry for not having investigated this better initially but basically it seems that we won't be able to use gulp-newer or gulp-changed for this task unless we are sure to have only one output file (which our gulpfile does not enforce atm). To sum it up gulp-newer does support 1:1 (like gulp-changed) and many:1 but not many:many. This is a problem in the case of scss because, for instance, a file could be imported from multiple other top level scss files...

Basically we have to remove filtering with gulp-changed entirely - at least for scss files - here unless we implement a filtering logic that's not trivial at all (basically, for scss, we have to construct the import dependency tree). What I'll do is use this rule:

.pipe($.newer('.tmp/styles'))

This will effectively work if you are writing CSS files but for SCSS files the comparison will always fail so they will always get processed by the task.

[Kangomnawe]

I am having same problem with my style.css on local environment setup with VCCW.
I used underscored start-up-theme from scratch building new word-press theme but unfortunately there is no changes taking place in css while making changes on scss.

[effizo]

"there is no changes taking place in css while making changes on scss." I have the same issue. Please have you been able to resolve this issue? Thank you.