search

joshuaiz / plate

Plate: a super stripped-down WordPress starter theme for developers.
https://studio.bio/themes/plate/
Do What The F*ck You Want To Public License
109 stars 27 forks source link

SCSS not updating #17

Closed companyhen closed 5 years ago

companyhen commented 5 years ago

I am using CodeKit which is compiling my SCSS into CSS properly, but for some reason my theme isn't updating the changes. I have tried the customizer.scss, style.scss, and _base.scss files with no luck. What am I doing wrong? I'm using MAMP on localhost. Updating PHP files works fine, just trying to figure out the scss -> css thing.

joshuaiz commented 5 years ago

Hi @companyhen - if you're using Chrome, it aggressively (and I mean really aggressively) caches pages. I use the Classic Cache Killer extension to make sure Chrome doesn't cache anything:

https://chrome.google.com/webstore/detail/classic-cache-killer/kkmknnnjliniefekpicbaaobdnjjikfp?hl=en

If that still doesn't do it, add some changes to your .scss file and then check the compiled style.css file to make sure your changes are being compiled.

Also, usually CodeKit needs no setup but if you have changed the theme file structure you might need to adjust the output path(s) in CodeKit.

If none of those are helping, circle back and we can try to troubleshoot further.

companyhen commented 5 years ago

Thanks for the quick reply @joshuaiz

I didn't make any changes to the theme structure, I just dragged the theme into codekit and set up a new wordpress database via mamp. Site is running like normal and PHP file changes are working with livereload.

Previously I was using the wp-scss plugin (https://wordpress.org/plugins/wp-scss/) with Bones theme successfully to get it working - I assume I don't need that any more? I installed the Chrome plugin (I use http://brave.com which uses chromium) but still no luck.

Should I "enable" build folder?

screen shot 2019-03-05 at 15 01 52

Appreciate your help.

EDIT: Is the 'customizer.scss' file supposed to be for my custom css and should it work out of the box?

joshuaiz commented 5 years ago

Hi @companyhen - no you don't need the build process.

In your CodeKit, in the files section, can you click on /library/scss/style.scss and see what it looks like. Mine looks like this:

screen shot 2019-03-05 at 2 20 04 pm

Make sure the Output is set to 'Compile it` and it is going to the same location.

Just some obvious things to check:

companyhen commented 5 years ago
  1. Yes I'm viewing the correct site
  2. /library/css/style.css is being loaded
  3. I just put up a clean Wordpress 5.1 install with no plugins activated at the moment.

Although it looks like my CodeKit settings were slightly different from yours:

screen shot 2019-03-05 at 15 26 16
companyhen commented 5 years ago

It seems to be working with updates to the style.scss file after copying your settings in CodeKit! Thanks.

Can I create a new scss file (ex: custom.scss) to do my custom css in? Or is that what the 'customizer.scss' file is for? Because I'm making updates in the customizer file and no changes are being updated, unlike the style.scss file which is working now.

One more question, are these settings correct? My site lives at 'http://localhost/plate'

screen shot 2019-03-05 at 15 32 41
joshuaiz commented 5 years ago

Your set up is fine...the Create a source map is cool because it will map your compiled file back to the original file so when you're working in the dev tools, it will show _base.scss or _768up.scss or whatever.

Autoprefixer automatically adds any vendor prefixes for various browser so it's also a nice to have.

(Just saw your new message) Great!!

customizer.scss is intended for the WordPress Customizer.

The way Plate works and how Bones worked is you really can just edit the existing files as you need. All that said, you can definitely add a custom.scss (or any additional stylesheets). The main thing is that whenever you add a stylesheet, you need to update the style.scss file to make sure it is importing it. You'll see all of the import statements at the top, so you can just add yours like so (at the bottom):

/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/

// normalize: http://necolas.github.io/normalize.css/
@import "partials/normalize";

// Sass variables
@import "partials/variables";

// typography
@import "partials/typography";

// Sass functions
@import "partials/functions";

// import mixins
@import "partials/mixins";

// CSS Grid
@import "partials/cssgrid";

// Add your custom stylesheet
@import "partials/custom"

Note that to import this way, you need to use an underscore as the first character of your file so "_custom.scss" should be the filename.

Again, you don't have to create your own custom stylesheet(s) — you can just edit the existing ones — but you certainly can. Just make sure that every new stylesheet has to be imported to style.scss so that it gets compiled to the final output.

Re: External Server, I used to use MAMP Pro and I think you need to use the alias from MAMP so it should be something like: http://plate.local:8888/ or http://localhost:8888/ - it depends how you have things set up in MAMP. Here's more info from CodeKit: https://codekitapp.com/help/browser-refreshing/

companyhen commented 5 years ago

Thanks a ton! That worked.

One issue I'm having now is my custom.scss has less priority for some reason, see screenshot. Any suggestions on fixing this without having to abuse !important

screen shot 2019-03-05 at 15 49 48

joshuaiz commented 5 years ago

With CSS, it is actually the lower or last rule that has priority so I would then place your @import down at the bottom of style.scss and it should have priority.

All that said, if you're editing styles that are already in Plate, I really would just...wait for it...edit them! That's how Plate (and Bones) are supposed to work. Just go in and get dirty...you can always copy the original styles back from a fresh copy of Plate so I wouldn't worry about adding your own stylesheet.

companyhen commented 5 years ago

Thanks for all the help, looking forward to having fun with this. 😄

joshuaiz commented 5 years ago

No worries. Going to close this...if anything else crops up, don't hesitate to file a new issue.