How to run sass in wordpress? - css

I have theme and I add sass and gulp in my theme. here are the list of file I have.
I would like to ask How can I run sass in my theme? I try to google it, but no right explanation how they did it. I found this also link, but no clear explanation. Please help me. I want to learn more about sass. If you have tutorial. please give me link.
sorry i didn't mention the OS I used. I used windows.

You have assets folder. All source files including .scss files must be there. Then add gulp task to compile scss. It will take files from assets folder and put them to dest folder (dest folder is for compiled resources). Then add link to compiled .css file from dest to wp header.
Tutorial.

Please follow steps mentioned here
Hope this helps you.

Also, look at setting up a child theme, then you can keep all your code isolated.

Related

How to compile scss file in wordpress

I have on of the website that are the blogging site build in wordpress. And in this website using scss and if i have change this scss file and save than changes not made. If anyone know that how i compile our scss file in wordpress than please let us know
Thanks
Follow the below tutorials will guide you on how to set up SCSS
https://www.elegantthemes.com/blog/tips-tricks/how-to-use-sass-with-wordpress-a-step-by-step-guide
https://beautifytools.com/css-to-scss-converter.php
https://jsonformatter.org/css-to-scss
if you have no idea about the command line then simply install the plugin
https://wordpress.org/plugins/wp-scss/

Joomla css file rewrites it self

I was wondering why .css file rewrite itself on Joomla.
I have bought Joomla template. In template manger under general settings I am using Development Mode On. If I use Development Mode OFF I am not able to change .css files.
For example: I am using theme which is located in t3-assets/dev/ theme i choose
When I use On mode I find section I want to change, it works. But after some time it rewrites it self. I was wondering how to prevent that if possible?
Some templates are overwritten alone , go to your server and take off the writing mode in the template folder.
My guess is that the template is using LESS, so CSS are compiled each time you modify LESS. If that is the case, you should not prevent it, but find the correct way to include your modifications (probably there's a "custom.less" or similar file for that).

How to use LESS css in wordpress theme development?

I googled the same question but couldn't find the perfect answer, Can anybody make it clear on how to use LESS CSS in WordPress theme development? I don't want to rely upon online scripts.
I already tried https://github.com/sanchothefat/wp-less but no luck..
Your question is very broad? Too broad I think.
How does your develop process looks now? How do you want to compile your Less code.
Notice that Less code should be compiled into static CSS. Of course you can use the in browser version too, but in-browser compiling is not suitable for production.
Basically you should compile your Less into CSS first. You can compile styles.less into styles.css and upload that file into your wp-content/themes/yourthemes folder. Instead of styles.css you can use any other file and integrate in with the wp_enqueue_style function into your theme.
In the case that you want your Less code via the WordPress dashboard, you can install the WP Less to CSS plugin. This plugin compiles your Less code into a static CSS file as described above.
The JBST theme use the Less plugin describe above. You can also take a look at the Roots.io theme, which uses Less, npm and grunt to build.
A process that, for now, I use occasionally. I installed Koala, which creates CSS files from LESS on the fly. Then we create style.less and as we write code in it - through, for example, WinSCP upload to the server in the theme folder.
You can also use a copy of the site on a local server like OpenServer (OSpanel). With Koala create CSS automatically from LESS in theme folder on local server. After changes - upload them to the work server.
You can use Grunt.js to compile the file locally or some app lice CodeKit. Also you can use some wordpress plugins like this one: https://wordpress.org/plugins/wp-less/
I used that plugins before an it works fine.

Custompage Module-Issue with CSS (Drupal-6.x)

I'm new to Drupal and have recently installed the custompage module. I received a lot of errors until I placed "custom.tpl.php" in the custompage module folder. I am able to navigate to the custom page from the primary links. But, the CSS I created for that specific page is not showing up. I'm thinking it's because "custom.tpl.php" is located in the module folder of Drupal Core and my CSS is in the theme folder. But I'm not sure how to fix the problem.
I tried to copy the "custom.tpl.php" in my themes folder, but then I receive a lot of errors.
Any help would be appreciated.
The problem is not the module. The css should be available to every page in your theme.
Make sure that your CSS file is mentioned in YOURTEMPLATE.info file (YOURTEMPLATE is the name of your template).
It should look like that:
stylesheets[all][] = YOURCSS.css
If your css file is in YOURTEMPLATE.info, try to clear drupal cache, go to admin/settings/performance and clear cache.

Magento CSS not Loading in New Template

I have posted on the template creator's site, as well as Magento support, but no one has responded.
The CSS is not loading at all on the custom theme I have installed, which is supposedly compatible with the current version of Magento.
You can view the page here: shop.dearearth.net
This is a fresh installation of Magento and the theme, with a fresh database.
I have a feeling it should be a relatively quick fix.
Thanks for looking.
All the links in your page referring to the
http://www.shop.dearearth.net/skin/frontend/base/
directory on your site returns 404. Make sure your css files are in fact in there. Also make sure your links aren't being broken by a .htaccess file.
Make sure your CSS is 777 rights by admin.
OR
Please copy the whole code from latest css and take it as a backup and create a new css file as same name and past the code.
Check in admin back-end, System > Configuration > General/Design if your theme is right specified. Also check if after you installed the new theme, the files have the proper rights (normally, they must be accessible by the web server with Write permissions)
For more info please also take a look at Magento Designers Guide for understanding of how Magento read and split template information. Maybe you have put the CSS and images in a wrong directory :)
Solved.. sort of. The version of the template turned out to be quite outdated, and the incompatible with the current version of Magento, which handles things differently in terms of calling styles in the page.xml file.
Thanks for your inputs.

Resources