.css file not uploading to server after .less compile phpStorm 10 - less

I have a main.less file that contains #import for a number of .less files that I compile into 1 main.css file.
My main.less file:
#import "imports/header";
#import "imports/content";
#import "imports/footer";
......
In phpstorm 10 I set up a file watcher to compile main.less into main.css. My deployment options are to upload changed files on explicit saves (command S)
On save, the main.less file gets compiled properly if I made a change to any .less file. Then all .less files that I made changes to get uploaded to the server. However, main.css does not. I have to manually right click it and upload to server.
I believe this is because phstorm looks for changes before the less is compiled, then compiles less and does not notice the changed main.css
My folder structure for my less is:
/stylesheets/
____/imports/
________/header.less
________/content.less
________/footer.less
________/ .........
____/main.less
____/main.css
My less file watcher settings are:
Name: Less
Description: Compiles .less files into .css files
Uncheck Immediate file synchronization
Check Track only root files
File Type: Less
Scope: Project Files
Program: /usr/local/bin/lessc
Argument: main.less
Working directory: $FileParentDir$/stylesheets/
Environment variables:
i. Name: PATH
ii. Value:
/Applications/MAMP/bin/php/php5.4.30/bin:/Users/xxx/.composer/vendor/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin
Output paths to refresh: $FileParentDir$/stylesheets/main.css
How do I make it so my main.css uploads after main.less has been compiled?

You need to configure your deployment settings.
Project Settings | Deployment | Options, setting the Upload changed files automatically to the default server option to Always
And check option Upload external changes
Phpstorm will watch for changed scss and CSS files inside project directory and upload them.
https://confluence.jetbrains.com/display/PhpStorm/Sync+changes+and+automatic+upload+to+a+deployment+server+in+PhpStorm

Related

Activating extension ' failed: Cannot find module 'file.js' when keeping /out in .gitignore

while vs code extension development, there is /out folder which keep generated js files for respective typescript file but committing these files in remote repo seems not useful so adding the entry in .gitignore but now when I run the extension it say module not found
Activating extension 'xkeshav.<extension-name>' failed: Cannot find module 'd:\Developer\extension-folder\out\extension.js'
Require stack:
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\loader.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-amd.js
- c:\Users\User\AppData\Local\Programs\Microsoft VS Code\resources\app\out\bootstrap-fork.js
- .
so my question is
when not keeping /out entry in .gitignore, it works file so whether we need to commit these files in remote or not ?
Make sure you have a .vscodeignore file in your repo. VS Code only uses .gitignore if there's no .vscodeignore. The .vscodeignore file is then used to exclude files/folders from the extension bundle instead of .gitignore. A typical .vscodeignore looks like this:
.vscode/**
.vscode-test/**
out/test/**
test/**
src/**
images/**
**/*.map
.gitignore
.eslintignore
.eslintrc.json
tsconfig.json
typings/**
As you see out/ itself is not excluded, just the tests which end up there.

LESSC to compile to a custom path using environment variable

Bottom line I need lessc to compile my main.less file to $CATALINA_EC_TMP/main.css
I'm working on this project, where I need to generate multiple output css files originating from the same source (LESS file) using LESSC.
So with Jet Brain's (WebStorm or IntelliJ Idea) File Watcher, I don't get much of options to save the output files to a custom path using an environment variable.
The reason why I use an environment variable is because some of the outputted files is in a temporary path (it changes whenever I deploy with ant)
That said ...
This is my Environment Variable:
$CATALINA_EC_TMP = '/foo/bar/'
and it's changing so in the next deployment, it won't be /foo/bar/ anymore.
and this is the command line that's being executed by my IDE to compile less files
/usr/local/bin/lessc --no-color main.less
I need lessc to compile my main.less file to $CATALINA_EC_TMP/main.css
so the resulting file would be in that case /foo/bar/main.css or wherever the $CATALINA_EC_TMP value is.
I hope that there's a solution to this, anyway if it doesn't exist I think I'll use fswatcher to copy my generated css files into my destinations whenever I compile.

Less File Watcher - Ignore certain files

I'm using the Less.css File Watcher with WebStorms and I would like to exclude specific files for compilation.
I have one style.less file that includes all other CSS and only this file should be compiled. How can I do that?
If you need the file watcher to watch changes in a single .less file only, ignoring all changes in other .less files, this can be done using Scopes:
In Settings/Scopes add your custom scope, with needed files/folders excluded (see Scopes (Phpstorm Help) for more info).
In Settings/File Watchers, open your LESS file watcher settings and change the 'Scope' property value from 'Project Files' to your custom scope.
If you need changes in all less files being watched, but have a single style.css generated that would include the styles from all .less files throughout the project, tick 'Track only root files' checkbox in your watcher settings. See the explanation in Help:
When the File Watcher is invoked on a file, Phpstorm detects all the files in which this file is included. For each of these files, in its turn, Phpstorm again detects the files into which it is included. This operation is repeated recursively until Phpstorm reaches the files that are not included anywhere within the specified scope. These files are referred to as root files (do not confuse with content roots).
When this check box is selected the File Watcher runs only against the root files.
When the check box is cleared, the File Watcher runs against the file from which it is invoked and against all the files in which this file is included recursively within the specified scope

How to use variables in different less files?

Let's say I separate a less files into many less files to be easy to organize.
Here is my repository:
/reset.less
/variables.less
/mixins.less
/main.less
/styles.less
The styles.less is just importing the other files:
#import "reset.less";
#import "mixins.less";
#import "variables.less";
#import "main.less";
However, when I add some codes into main.less and use the #line-color which is defined in the variables.less. It shows Name Error: variable #line-color is undefined and I cannot compile it- I use PHPStorm with less plugin.
Could you pleas suggest me?
You have to import your variables.less to all files which use your variables.
Edit:
You have to compile only your style.less. You cannot compile the main.less because it doesn't know the variables.less but you don't want a main.CSS anyway, do you?
You should get the correct style.css which is (I guess) the only css file you'll need.
I could solve it by doing the following in PHPstorm:
Open Preferences…
In Tools > File Watchers > Less (configure)
Check "track only root files"
Change the "Output paths to refresh" to ../css/$FileNameWithoutExtension$.css (added "../css/" in front - depending on what folder you'd like to write the css files into)
(At this point you may want to check if this already does the job to your liking. If it doesn't, carry on to the next step…)
In Other Settings > LESS Profiles > (Your profile) (configure)
Define "LESS source directory": /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less (depending on which folder contains the .less files)
Define "Include file by path": /Users/macuser/htdocs/MySite/sites/all/themes/mytheme/less/style.less (file name depending on which .less file compiles the other .less files)
Add "CSS output directory" by selecting the folder you wish to write the (minified) CSS files
Enable Compress CSS output if desired
Notice: If Compress CSS output is enabled, this means that the code will be compressed everytime you right-click a .less-file and hit "Compile to CSS". By default the output will not be compressed with every modification you make to the .less-file. If you do want to compress the CSS straight away,
Install less-plugin-clean-css using the following command in
Terminal: sudo npm install -g less-plugin-clean-css
Next, go to Tools > File Watchers > Less (configure), and change the "Arguments" to --clean-css --no-color $FileName$ (added "--clean-css" in front).
Now it will compile your CSS automatically while you're coding. You'll no longer need to compile manually.

yuicompressor and/or uglify-js does not work in PhpStorm

I have installed node package manager (npm) on my windows machine and then i ran the command "npm install less -g" and went on setting up the file watcher in PhpStorm for LESS. This worked very good. I also managed to get it to put the .css files in the css folder instead of in the less folder where I have my .less files.
My next step was to install yuicompressor so I ran the command "npm install yuicompressor -g". And then I set it up in PhpStorm by adding the yuicompressor for CSS, but it only creates empty .min.css files.
In the PhpStorm watcher settings I have set:
Program: "C:\Users\XXX\AppData\Roaming\npm\yuicompressor.cmd"
And ticked the box "Create output file from stdout"
I want to achieve this:
.less (project_root/less) -> .css (project_root/css) -> .min.css (project_root/css)
Is there any one else that has had the same problem, I can't seem to find any solution.
Btw, I also tried to install uglify-js, but with the same result, it only creates empy .min.js files.
Some extra info, my environment variables are as follows:
PATH (User) = C:\Users\XXX\AppData\Roaming\npm
Path (System) = C:\Program Files\nodejs\
I removed the "Create output file from stdout" (from the yui CSS file watcher and left it checked on the LESS file watcher) and it seemed to work. But I had to link to the yuicompressor.cmd and not the .jar file as mentioned in the links from LazyOne. I also had to uncheck the "Immediate file synchronization" on the LESS file watcher but needed it to be checked on the yui CSS file watcher.
Seems like its very tricky to get it to go from "LESS -> CSS -> CSS compressed" with only saving the .less file when editing, but with this setup it finally worked.