I'm currently using YUI Compressor to compress my CSS files in a project which worked fine but because of multiple files for plugins I decided to use subfolders in my CSS folder. How can I make the File Watcher also work on subfolders? I can't seem to find any documentation on this, nor have I found anyone with the same problem on the web.
I don't mind if all CSS files throughout the whole project scope gets minified, but I want to avoid defining new File Watcher every time I create a new subfolder.
PS: I see a checked "Track only root files" option in the Edit Watcher screen, but it's greyed out, so I can't turn it off. Don't know why this option is provided, since it always seems to be greyed out, no matter what settings I try.
Not sure i understand what subfolders are meant. With default scope (Project Files) all .css files in the project (root folder with all subfolders, recursively) are watched - why do you need to create a new watcher when adding a folder? Do you use some custom scopes in your watcher(s)?
Found it!
The "Track only root files" option not being optional was not the (or atleast not the whole) problem. This was bypassable by not using the default YUI Compressor file watcher template but creating a custom one.
The real problem was that my scope was set to Project files (the Root of the project) but the Arguments string being set to $FilePath$.css -o $FilePathWithoutAllExtensions$.min.css. What this means is that The watcher was searching for C:/[PROJECTPATH]/[SUBFOLDERS]/[FILENAME].css in the Project root, and then outputting it into the Root of the project (-o $FileNameWithoutExtension$.min.css).
With some fiddling with the Arguments and the Insert Macro's function i made this new Arguments string: $FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.css -o $FileDirRelativeToProjectRoot$\$FileNameWithoutAllExtensions$.min.css. It now watches all [FILENAME].css files and places the minified versions in the same folder of the original.
Using the Show console: Always instead of Show console: Error option really helped me figuring out this problem since not finding a file to minify, based on the arguments, apparently is "not an error".
Hope this explanation will help to safe some frustration and hours for everyone who encounters this problem.
I struggle a while with this also due to the fact that you always have to apply settings, make some change on the SCSS File and see if it's working.
My setup is working find now for a following structure:
// Source
./scss/
- styles.scss
- _variables.scss
- subfolder/
- more-styles.scss
// Output
./css
- styles.css
- subfolder/
- more-styles.css
My File Watcher Settings look like that:
// Program:
sass
// Arguments:
./$FileDirPathFromParent(scss)$$FileName$:../css/$FileDirPathFromParent(scss)$$FileNameWithoutExtension$.css
// Output paths to refresh:
$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
// Working directory:
$Projectpath$/scss/
One of the keys was to set the working directory correctly, for example $FileDir$ is just the SCSS file is in, so the relative paths are wrong.
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.
I am working on SuiteCRM, and i want to change the CSS of my website in order to personalize it but there is an issue.
When i am changing the "style.css" of the SuiteP Theme, the pages aren't changing at all. Here is my question:
Does someone know how to change the css of this CRM and can help me to fix it ?
Thanks a lot
Make sure that your active theme is "SuiteP".
You need to know that SuiteCRM store things inside "cache" folder and you are doing changes without refreshing cache files. Cache files location will be cache/themes/SuiteP/css/style.css. So for quick changes, you can use browser developer tools.
Moreover, if you change core style.css then empty cache directory and (hard)refresh your browser. If cache files don't exist then Suite will build new using core file.
Like Star previously mentioned, Suite does cache the CSS.
Though, if you're not updating the SASS file, and just updating the CSS directly, your changes will be temporary for when the CRM next re-builds the CSS (I believe this is part of the Repair and Rebuild process in the admin section), your changes will be lost as the CSS file constructed from the style.scss file.
I'd recommend installing sass (via a gem or other means, however you choose), making changes to the scss then recompiling the css (or watching for changes if working locally, which I hope you are for working with Suite) when you've applied your changes.
If you still don't experience changes, try a repair and re-build or delete the cache directory and let it recompile on the next page load.
there are 2 options:
change core file and then delete cache contents. Refresh your page twice.
made changes in cache file. Make sure developer mood is off. Once you are done then copy it core file.
Create a new subfolder CUSTOM, copy the CSS files that are under suiteP (or the current theme) into the new custom. copy the whole path with folders, even if the folders are empty.
So the new path for the sytle.css with be /costum/theme/....../css/sytle.css
Change the file under the custom folder. The previous answers are not correct. This is well documented under the suite CRM docs.
Sometimes it doesn't work. Try next steps:
SuiteCRM better to use in development mode.
Not always the cache files deleting works for me. Better to use the tool in Admin panel - Quick Repair.
Sometimes good to clear browser cache (in dev mode reload a page by right clicking the refresh button).
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.
Lets assume I have 2 static assets (html files) in my project, files a.html and b.html.
File a.html has a link to file b.html inside of it.
Now I run a build and the 2 files got their name changed and everything is working fine (by the filerev module).
Now I need to make a small change only in file b.html -> filerev will give a new name to file b.html in the next build. Because file a was not changed it will have the same name as the prev build.
Now, in the next build usemin will go to file a and will fix the link to the new file b name and everything looks fine. But not, because file a still has the same name as prev build, users will get a broken link when trying to access file b from a.
I guess a workaround is to instead of having hashes of the file names, generate random file names each time.
That way you are generating all files so it is not optimized, but you prevent the caching problems between versions, while still allow caching of the browser for the same version.
Using the grunt-angular-template task can solve this issue as it is adding all the templates to the $templateCache of angular, so the no real requests will be made to the server when a template is requested and the recent template is loaded from the cache. Of course it is not ideal as in big applications you will not want this as this may increase your js file size
I tested my Netbeans setup with a html5 project and the css file was generated from Less file accordingly. then, I went ahead with a drupal bootstrap project and got no css file.
With the html5 project, I can select the root directory, hit the right button of the mouse, select "new->LESS file" to create a less file xxx.less under root/less directory and a css file xxx.css shows. But with the drupal bootstrap project, my best luck is using command-line 'lessc less/xxx.less css/xxx.css' to generate the css file. Did I overlook anything?
It seems that Netbeans 8 has a pretty "dumb" way of looking for LESS files by default. That default is that Netbeans looks in the project root for a folder called "less" that it then monitors for changes and compiles the output into a folder called "css" (both in the root of the project).
When working on something like a Drupal or Wordpress project, you might have your content be logically saved (for some reason) in a folder like: wp-content/themes/my-theme/lib/less.
So, what you need to do is add and/or modify the input and output folders to make sure that you're achieving the desired results. From the Project Properties windows select "CSS Preprocessors" and from there you can choose to either modify the defaults, or you can add a new folder to the watch list and have it get compiled into any directory of your choosing. The Input and Output paths are relative to the document root so you might do something like: /lib/less for the input source and output directly to the /css folder or it could be something like /static-assets/styles/compiled/css (for all that Netbeans or anyone else cares).
It is rather strange that Netbeans doesn't automatically set the input folder to the folder where you created the LESS file but such is life, it's not the first time I've experience a "Huh?" moment when working with Netbeans.