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.
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 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.
I just started to work with CSS and espacialy Sass. What I tryed to do for the last hour was to set a background image from my source folder from my scss. file.
I tryed several ways of accesing my directory. But not a single one worked.
My IDE (IntelliJ IDEA) always tells me that it can not resolve the directory.
I tried:
background-image:url('${resource(dir: "images", file: "bg.png")}');
background-image:url(../images/bg.png);
background-image:url('../images/bg.png');
background-image:url(../images:bg.png);
background-image:url('../images:bg.png');
And also as refered in this topic How to refernce JSF image:
background-image: url("#{resource['images/bg.png']}");
I hope one of you can provide me with a solution.
EDIT
this line gives no error in the .scss file:
background-image:url("/resources/images/bg.png");
but it precompiles wrong in the .css file because the directory can not be resolved anymore.
EDIT
the code that does not get marked as problem in either .scss or .css is:
background-image:url("../../../src/resources/images/bg.png");
But it still does not work my background remains white.
I've found the solution.
The problem was, that I tryed to access my java resources folder.
But I had to access a child of the webapp folder. As the .WAR is build from that context. That means this was the solution.
background-image:url("./images/bg.gif");
while my images folder is a child of my webapp folder.
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.