I made changes to my website styles using the specific SASS file for the specific page that I updated. Now, in order to make this changes to my published website (until now, everything was done locally), should I upload just the modified SASS file? Or should I upload the main SASS and CSS files where everything is being compiled locally?
Answering my own question: the solution is to upload the newly modified SASS file, together with the main SASS file and the CSS file and it will work.
Related
I have been searching all over for information on where django-cms is storing the CSS and SCSS data for my site, which I am working on localhost. When I go to edit the CSS file directly, it has no effect, so I'm wondering what needs to be done to edit those CSS files. Obviously they have been loaded somewhere. How can they be reloaded, or in general what is the best practice for editing the CSS files?
Apparently I had to do this with both the style.scss and style.css files, which seem to have the same css classes. But even after editing both files, I had to refresh the site on my localhost a few times before I could see the changes. Frustrating, but it does work to edit the files directly in the static folder.
#Lawrence DeSouza At first you should mention which plugins and style frameworks you use.
If you are using some sort of a frontend framework like Bootstrap 4 your should compile its css from scss separately. You can do it right on the dev server in a separate directory outside your project dir and cloned from the official repository. Normally you would only need to change variables in "/bootstrap-4.x.y/scss/_variables.scss" file. On the next step you would compile your *.css files with "npm run dist" command and then copy compiled files from "/bootstrap-4.x.y/dist" directory to your "/projectname/appname/static/css" directory. The process is well-documented here. After copying changed files to your "static" folder you should run "python manage.py collectstatic" and refresh the page. If it's not working after refreshing the page in a browser (normally it should work) - restart the server. I am a bit biased towards Bootstrap, but the logic should be the same in your case.
So I'm working on a web project and I started with an HTML/CSS template created by someone else. It appears to use bootstrap which I don't know much about.
Upon using chrome developer tools I noticed that some of the css styles being applied were coming from scss files which I can not find on my system. I'm wondering where do these files exist?
The screenshots are from
Chrome dev tools that tells me the path to the scss file that is applying styles
That same path on my system where the scss folder was stated to be does not appear to exist. Notice that I'm in the "vendor" folder but there is no scss folder as dev tools shows there to be.
Can someone explain to me where the browser is loading these scss files from? I've tried having Windows display hidden files and folders and that doesn't make a difference. Thanks!
Path to scss file via Chrome Dev Tools:
That same path on my file system
It happened because of scss sourcemap. It generated when compile scss file to CSS, for easy debugging.
I assume you are using development version of bootstrap. If you using production version it's not happen.
You can find more information about this here
There may be files with .map extension (called as the source map in scss world) in your project path. These .map files refer to the path of the .scss files that were used during development to create .css files. So, even though there are no physical .scss files present in your context path; and your html file refers to the compiled .css file, Chrome debugger would still show the original .scss file from which the .css got compiled. If you require the Chrome debugger to show the actual .css file name, then you could delete the .map file temporarily. This suggestion is considering you would like to see the .css file name instead of the non-existent .scss files. You could also check this link to understand more about working with .scss files in Chrome debugger : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
I have a folder structure like in the following picture. The less node.js I would compile with. I am calling the compiled CSS file in the meta-tag section.
When a change is made in the less file, the CSS file is automatically loaded on to the server I want to be.
Summary : If style.less changes in style.css to upload to the server.
Thanks for your help.
I solved the problem. Tools->Deployment->Options -> Upload external changes chose.
I’m a new user to CodeKit and sass and I’ve been playing around with it for the past few days trying to figure out how to use it correctly to improve my workflow.
I’m building a WP project so I start by creating a new CodeKit project with Zurb and compass. It outputs the files and I throw them into a folder called 'Foundation'. I then throw in my WordPress files, and throw that ‘Foundation’ folder into the theme I’m working on in WP in my ‘assets’ folder. I know in the YouTube video CodeKit mentions not to pull the files out so that any linking isn’t messed up, but I can’t keep those files in the root of my project because they need to be within the theme.
So it looks like this:
wordpress/theme/assets/foundation
Assets is also where my sass files live for the overall site
wordpress/theme/assets/sass
Where I get hung up is in the compiling of the files.
I have one master style.sass file where I import all my partials and that works correctly. I want to include the foundation app.scss file so everything is in one place, but it doesn’t call it up. It says the compiling is complete, but when I look at the code it’s just the import line without the foundation code actually being outputted. I also found that if I place my sass partials in a folder called partials, CodeKit can't compile them, even though I'm importing them with the folder name, example: partials/layout, instead of layout.
I’m doing this locally so I can’t show you the link, but I guess I just feel like I’m setting this up entirely wrong.
My question are:
How do others setup their projects on CodeKit with WordPress and Foundation?
Is it correct to import .scss files into a .sass file?
Any help would be appreciated.
You should make your CodeKit project only contain the folder for the theme you are developing. CodeKit should then put foundation, jquery, and other scripts and frameworks in a folder called bower_components because it uses bower to fetch the project's dependencies.
The advantage of using bower is you can update the packages from the command line and also through CodeKit. You can also keep dependencies out of the git repo by adding bower_components to your .gitignore file.
Check out this directory structure that I use based on the Roots Sage Starter Theme
/your-custom-theme-folder
|--/bower_components
|--/foundation
|--/jquery
|--/etc.
|--/assets
|--/fonts
|--/images
|--/scripts
|--main.js // custom js for theme goes here
|--/styles
|--/modules
|--/utilities
|--/etc.
|--main.scss // all sass is imported through this file
|--/dist // all files compile to this directory
|--/fonts
|--/scripts
|--app.js // all js files concatenated together
|--app.min.js
|--/styles
|--app.css // main.scss outputs all imported sass to this file
|--app.min.css
|--functions.php
|--index.php
|--single.php
|--style.css // no actual styles in this file, just theme info
|--etc.
Which file we should upload to server .scss or .css when we use Sass?
I read about Sass and Compass it makes these folders and files
I write scss in which gives output in .css file of same name.
My question do i need update whole folder to FTP or just .css file.?
I work with both .net and .php based websites.
the css is what the html pages will refer to. So thats the one you need to upload.
For source control, you only really need to keep the sass.
If you do not intend to do the compiling job on the server (like many Rails developers did with Capistrano), then no need to upload any sass files onto it. As Keith suggested, you need to keep sass files in source control repository and upload the css files. It's just like (more or less) compiling a c source code into binary executive files.