I'd like to introduce myself, I'm Lew. I'm very new to Umbraco - passed level 1 on 19/03/16 - or 03/19/16 for you Americans, and i've never used it prior to this.
I've head that you're a friendly bunch, so hopefully someone will be able to help.
The company I work for has commissioned a 3rd party to develop its new site. It's coming close to the handover date and i'm just working my way around a local install to make sure i'm off to a running start when we get the files.
The version is: 7.4.1
The styles are done with SASS within a SASS folder in root. With my experience from using SASS it all gets compiled into a single CSS file that the website links to - eg with a program such as Koala. However, when inspecting elements on the page, it links to the '_header.sass' file.
My initial thought was that; 'great, umbraco reads SASS! This is pretty easy then...' - turns out that didn't work. So I changed the SASS files to reflect the changes I wanted to do and re-compiled. This again didn't work. Confused I went back to the inspect too and saw that the path to the file was:
You're right, Umbraco doesn't "do sass" out of the box. Most likely one of the popular packages from the community that adds sass support was used. But which one?
First place to look is to see what packages are in use on the site. Go to the DEVELOPER section, click the 'Packages' item in the tree and then the 'Installed Packages' item. You'll see a list of installed packages.
One of them is likely to be the tool used to do sass on the site. You can then read the docs for that package and hopefully learn all you need to know about how to use it.
(at a guess, it'll be one of these: https://our.umbraco.org/search?q=sass&cat=project but the installed packages list should tell you for sure. Worst case, you might need to ask the 3rd party site developers what they used)
Douglas already metioned that there are some community package that handle SASS files.
But i can also be that the 3rd party used grunt or gulp to compile the sass files in to a single file. Can you look if you have a grunt.js or gulp.js file somewhere in your website ?
Gulp is javascript task runner for nodeJs. This will compile your sass files in to single css file. So when you make a change to a .sass file you need to run gulp from your command line.
I also saw that you said you have no source folder. Maybe the 3rd party forgot to add the sass files ?
Maybe you can show some code on how the css is rendered in the templates. Most likekly it will be in a View called Master.cshtml
Ah okay. I'll have a look at Gulp and see if that's the solution.
The Master template only has one css link - which is '/css/global.min.css', and within this file there's no mention of any scss imports.
In regards to packages, there doesn't seem to be any packages installed on the live development site or my local version so I think that can be ruled out.
The sass files are there in a file called sass. - exactly the same as the files within the /source/ folder.
Here are 3 images. The first being a screenshot of the files that are in the root of the site, and the second being where the actual webpage is getting it's styles from. I noticed that the source folder is orange? Could this be a temporary folder only created on view? Also, notice the path that the _header.scss file has with styles attached to it in the 3rd screenshot with the red underline.
Apologies if this is a really easy question. Kinda stuck unable to do any front end changes.
I think that they set something up so you see in the dev tools which sass file is used to define the style rule. Our frontenders do the same, just can't recall on how they call it.
I think in your situation is best to contact the 3rd party on how they set up. Will safe you time investigating it. In my opinion it should have been documented when they transfered the site to you.
Thanks for the update. I think I've managed to figure it out.
It does look like they've manipulated the front end paths like you said.
Directly editing the global.min.css file did do the change to the styles as expected on the site. Compiling all the sass into the global.min.css also had the same outcome.
It was just a bit deceiving on how they'd shown the file paths but at least I know now for the future. Actually quite handy to know which sass file it's coming from. Will have to have a look at how to do that. Would have helped on many occassions.
Thank you both for all your help. We finally got there!
Finding where SASS & CSS files are
Hello.
I'd like to introduce myself, I'm Lew. I'm very new to Umbraco - passed level 1 on 19/03/16 - or 03/19/16 for you Americans, and i've never used it prior to this.
I've head that you're a friendly bunch, so hopefully someone will be able to help.
The company I work for has commissioned a 3rd party to develop its new site. It's coming close to the handover date and i'm just working my way around a local install to make sure i'm off to a running start when we get the files.
The version is: 7.4.1
The styles are done with SASS within a SASS folder in root. With my experience from using SASS it all gets compiled into a single CSS file that the website links to - eg with a program such as Koala. However, when inspecting elements on the page, it links to the '_header.sass' file.
My initial thought was that; 'great, umbraco reads SASS! This is pretty easy then...' - turns out that didn't work. So I changed the SASS files to reflect the changes I wanted to do and re-compiled. This again didn't work. Confused I went back to the inspect too and saw that the path to the file was:
There isn't a source folder within the site files.
Does anyone know How I can go through and edit the SASS files within source?
Thank you,
Lew.
Hi, Lewis!
You're right, Umbraco doesn't "do sass" out of the box. Most likely one of the popular packages from the community that adds sass support was used. But which one?
First place to look is to see what packages are in use on the site. Go to the DEVELOPER section, click the 'Packages' item in the tree and then the 'Installed Packages' item. You'll see a list of installed packages.
One of them is likely to be the tool used to do sass on the site. You can then read the docs for that package and hopefully learn all you need to know about how to use it.
(at a guess, it'll be one of these: https://our.umbraco.org/search?q=sass&cat=project but the installed packages list should tell you for sure. Worst case, you might need to ask the 3rd party site developers what they used)
Let us know what you find out!
cheers, doug.
Hi Lewis,
Douglas already metioned that there are some community package that handle SASS files.
But i can also be that the 3rd party used grunt or gulp to compile the sass files in to a single file. Can you look if you have a grunt.js or gulp.js file somewhere in your website ?
Dave
Hi Doug and Dave.
Thanks for the replies.
Okay I'll have a look at the packages and see what there is when I get to work this morning.
Dave, they did say that they used Gulp for Sass, but I just presumed that was a tool to compile it all together. What's the significance of Gulp?
Thanks,
Lew.
Hi Lewis,
Gulp is javascript task runner for nodeJs. This will compile your sass files in to single css file. So when you make a change to a .sass file you need to run gulp from your command line.
I also saw that you said you have no source folder. Maybe the 3rd party forgot to add the sass files ?
Maybe you can show some code on how the css is rendered in the templates. Most likekly it will be in a View called Master.cshtml
Dave
HI Dave,
Ah okay. I'll have a look at Gulp and see if that's the solution.
The Master template only has one css link - which is '/css/global.min.css', and within this file there's no mention of any scss imports.
In regards to packages, there doesn't seem to be any packages installed on the live development site or my local version so I think that can be ruled out.
The sass files are there in a file called sass. - exactly the same as the files within the /source/ folder.
Here are 3 images. The first being a screenshot of the files that are in the root of the site, and the second being where the actual webpage is getting it's styles from. I noticed that the source folder is orange? Could this be a temporary folder only created on view? Also, notice the path that the _header.scss file has with styles attached to it in the 3rd screenshot with the red underline.
Apologies if this is a really easy question. Kinda stuck unable to do any front end changes.
Thanks again,
Lew.
Hi Lewis,
I think that they set something up so you see in the dev tools which sass file is used to define the style rule. Our frontenders do the same, just can't recall on how they call it.
I think in your situation is best to contact the 3rd party on how they set up. Will safe you time investigating it. In my opinion it should have been documented when they transfered the site to you.
Dave
Hi Dave,
Thanks for the update. I think I've managed to figure it out.
It does look like they've manipulated the front end paths like you said. Directly editing the global.min.css file did do the change to the styles as expected on the site. Compiling all the sass into the global.min.css also had the same outcome.
It was just a bit deceiving on how they'd shown the file paths but at least I know now for the future. Actually quite handy to know which sass file it's coming from. Will have to have a look at how to do that. Would have helped on many occassions.
Thank you both for all your help. We finally got there!
Lew.
is working on a reply...