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
Related
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.
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'm working on a WordPress theme (more specifically: a wordpress theme boilerplate) which makes use of SASS (and lots of other technologies). My SASS files are within assets/sass. My problem is: how/whereto compile them?
Compiling them into the root directory doesn't feel right, since it gets bloat up - and it is already pretty big (with Grunt, Bower, etc.). But the asset path problem (see below) would disappear.
Compiling them into a directory (like temp or whatever) wouldn't bloat up my directories but lead to the asset path problem.
The asset path problem:
elem { background-image: url('images/foobar.png'); }
The path would be correct if the compiled sass file in assets, nowhere else. assets/images/foobar.png would just work in the root directory.
An important note: it's possible to create a distributable version of the theme with Grunt, where, amongst other things, all styles are concatenated with the style.css file in the root directory. The generated dist directory then contains only files which should be uploaded to a server or used for distribution (no build files, no sass, no coffee, etc. - just compiled and "finished" files).
Any ideas? Thanks.
Morning,
I have installed SASS and Ruby and have been using it with much pleasure and delight. When I am watching a simgle file, I can specify the output file name to include .min like this:
sass --watch css/scss/styles.css:css/styles.min.css --style=compressed
This works fine.
However, how would I do the same when watching a folder with the following command:
sass --watch css/scss:css --style=compressed
This works fine for me for all files in the folder. But, it outputs the files as
filename.css
I need to have the output file names to be
filename.min.css
I have read various posts on https://github.com/subash/Prepros/issues/38, which seem to suggest editing a file called config.rb
I found two such files on my system, none of which are located in Ruby. I made the suggested changes, but to no avail.
How can I do this easily?
I have Ruby193 installed.
If you can't rename your files in to [filename].mini.sass so the output will be [filename].mini.css you can include the original files in "proxy" files with names like [filename].mini.sass and compile them.
You can create the configuration file with compass:
compass config [path/to/config] [--sass-dir=sass --css-dir=css ...]
Here's a list of the configurations
I am using Netbeans 8.0 to edit my HTML, PHP, and CSS. Just today I have installed SASS and enabled it within Netbeans. I am developing on Ubuntu, and Ruby and Sass are both available in the repositories, so I installed them and Netbeans found the SASS executable with the click of a button. So, I assume it's all working.
I have created a file called style.scss, and put in some test colour variables and a dummy #test id.
My understanding was that when I saved the .scss file that it would get processed and a .css file with the same name, in this case style.css, would get created. Or updated if it already existed.
Is this not the case? I did see other SASS and .css file generation questions here on Stack Overflow, but I didn't see one specific to Netbeans, so I'm not sure if there's something I haven't set up correctly in my environment. Also, I don't need to upload to a server when saving, I am just testing and developing locally.
How do I actually generate a .css file from my .scss in Netbeans 8.0?
Right click on the project -> Properties -> CSS Preprocessors
You have to set an input folder, for example /scss, and an output folder like /css
And there is a checkbox "Compile Sass files on save".
For Compiler options " --style compact " can be useful.
This was working for me in NB7.4, but in 8, something happened...
The plugin page says, it's currently incompatible with 8.
http://plugins.netbeans.org/plugin/34929
UPDATE: My scss folder was wrong... So it's working in NB8.
Look # the project settings, and separate your .scss and .css files in two folder, the default folders are /scss and it converts files to /css folder