I have the following file structure:
--public_html/
- css/
- less/
- _mixins.less
- _variables.less
- _theme.less
- main.less
I am using PhpStorm with a File Watcher running LESSC from NPM.
My file watcher is as follows:
Program: /usr/local/bin/lessc
Arguments: --no-color $FileName$
Output paths to refresh: ../$FileNameWithoutExtention$.css
Files:
main.less:
#import "_variables.less";
#import "_mixins.less";
#import "_theme.less";
_theme.less contains my stylsheet and _variables.less and _mixins.less are all pretty self explanatory.
When I modify and save main.less The file main.css is created in the css folder as it should.
However, when I edit my _theme.less file, LESSC creates a _theme.css file, also.
How do I stop these extra files being created?
If you need any more info, please ask.
Please ensure that Track only root files option is enabled in that particular File Watcher settings -- it does just that.
From https://www.jetbrains.com/help/phpstorm/2016.3/new-watcher-dialog.html#d199014e291
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.
Related
I'm trying to use the File Watcher tool in the Jetbrains IDE (Webstorm and Rider) to automatically minify my .css files and generate .min.css files for them on the whole project.
Thing is, it keeps minifying files that already have .min.css as the extension. So I end up with files like slick.min.min.css. I can't find any option to control what the criteria is for matching files. Is there some option to force it to ignore .min.css files, so I don't get duplicates?
I was following this guide here: https://www.jetbrains.com/help/idea/compressing-css.html#ws_css_compress_create_file_watcher
with some tips from here How to Minify CSS with SCSS File Watcher in PHPStorm IDE
As .min.css files are still CSS files, your watcher listens to changes in all them ( because watcher Scope == Project files, File type == CSS) and produces the output.
As a workaround I can suggest excluding minified files from watchers processing:
create a new scope (Settings | Appearance & Behavior | Scopes) with minified files excluded (like file:.css&&!file:*.min.css)
choose this scope as your file watcher Scope
I have a folder with Less files, split in parts to have a cleaner workspace. But I want them to be compiled by PhpStorm to 1 file (styles.css in a css folder). I installed lessc and it compiles the files separate. See picture 1
As I said I would like to have all files combined into css/styles.css But I don't get this configured right. My configuration is as followed:
I hope someone can explain what arguments I could use.
When Track only root files option is enabled in Less file watcher settings, file watcher produces a single .css file with name matching your "main" .less file (the one that imports all your "partials") that includes the merged content of all your .less files. No individual .css files for partials are created
I've set up a new Jekyll site to test the Neat 2.0 grid. However, as I run Jekyll Serve I've noticed that nothing from my main.scss file doesn't compile into my main.css file:(
Folder set up
Config.yml
sass:
sass_dir: _scss
What's happening here and how can I get my main.scss file to compile?
The sass_dir won't be processed by the sass converter directly, is only meant to contain partials:
sass_dir becomes the load path for Sass imports, nothing more. This
means that Jekyll does not know about these files directly (..)
This folder should only contain imports.
To have your sass file converted, start the file with two lines of triple dashes:
---
---
// sass content
The output file will be located in the directory where that file is placed.
You can put it in css/main.scss and Jekyll will generate css/main.css.
I am playing with this as well, but I'm a beginner, so take my advice with a pinch of salt.
However, my setup is working and compiling all scss changes when I'm running "jekyll serve --watch" with my _sass folder specified in config.yml as:
sass:
sass_dir: _sass
My _sass folder itself contains a couple of _scss files, which I use for styling, but the important thing, I think, is that my jekyll CSS folder contains only imports in only one file named main.scss, like this:
---
# Front matter comment to ensure Jekyll properly reads the file
---
#import
"layout",
"grids",
"etc"
Hopefully this not-very-techinical explaination is of use either to you, or to someone googling how to make jekyll compile/process and watch for changes in .sccs files.
I have a styles folder in my project. Inside it I have the following folders: css, scss, css-maps. I want the following: when I update a scss file in scss folder, I want it to create/update a css file with the same name in css folder and *.css.map file in css-maps folder.
|styles
|css
my-style.css
|css-maps
my-style.css.map
|scss
my-style.scss
I defined a SCSS watcher in my Intellij. It has the following settings:
Arguments: --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css --no-cache --update $FileName$:../css-maps/$FileNameWithoutExtension$.css.map
Working directory: $FileDir$
Output paths to refresh: ../css/$FileNameWithoutExtension$.css:../css-maps/$FileNameWithoutExtension$.css.map
The problem is that it still outputs my-style.css.map to my css folder (and CSS file points to this map file), while in my css-maps folder it puts 2 files: my-style.css.map which looks exactly like the .css output file, and my-style.css.map.map. Yes, with double .map extension.
How can this be fixed?
Here is configuration I'm using, hope it will help:
Arguments: --sourcemap=none --no-cache --update $FileName$:../css/$FileNameWithoutExtension$.css
I've a PhpStorm file watcher running autoprefixer. However the file watcher runs recursively. I think this is because it generates a new css file which the file watcher then runs on.
Is there a way to force them to run only once?
I think I need a scope of Project files because I am not directly editing the css file, instead I have a SCSS file that creates a CSS file which should then be auto prefixed. My settings are shown below.
You have to:
create custom scope (Settings | Scopes .. or by clicking on corresponding "..." button in File Watcher);
[optionally] include desired files (e.g. *.css) -- not really required as "File Type" field of File Watcher already covers it
exclude already modified files (*.min.css)
Now use that scope in your File Watcher instead of default "Project Files"
Excluding directories from the Scope using a custom scope also works. This example is from a Symfony2 project.