Intellij Idea 11: How to Compile .CSS from .Less

Intellij IDEA 11: how can I compile .css from .less?

IntelliJ IDEA relies on web frameworks and third-party deployment tools to perform this task. There is a feature request to perform such compilation internally, feel free to vote.

Less File Watcher - Ignore certain files

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 can I stop the Grails less-resources plugin from compiling my less files every run-app?

I asked this in the Grails mail list. The solution is to use some external tool to compile the less and add this in your version control, getting rid of the plugin and simplifying things.

Then the resources will link only for the compiled css and this will improve your startup time & memory usage.

For mac, the folks recommended this app.

It can be left to run in the background, and is really smart about recompiling when linked resources are updated. It can also compress at the same time, so you end up with minified CSS files, if you choose.

Intellij IDEA opening File Type with External Tool

Register new file type. It's described in manual: https://www.jetbrains.com/help/idea/2016.1/opening-and-reopening-files-in-the-editor.html

Running Autoprefixer with BundleTransformer / LESS in Debug mode

In the documentation (sections: “Examples of usage”, “Debugging HTTP-handlers” and “Postprocessors”) describes how to solve this problem. I will list the basic steps:

1. For debugging HTTP-handlers to use a configuration settings from bundles need to add in the RegisterBundles method of App_Start/BundleConfig.cs file the following code:

   BundleResolver.Current = new CustomBundleResolver();

2. In order to these settings can be applied to CSS- and JS-assets need to register the debugging HTTP-handlers CssAssetHandler and JsAssetHandler in Web.config file. To do this in the IIS Integrated mode, you need add to the /configuration/system.webServer/handlers element the following code:

   <add name="CssAssetHandler"
   path="*.css" verb="GET"
   type="BundleTransformer.Core.HttpHandlers.CssAssetHandler, BundleTransformer.Core"
   resourceType="File" preCondition="" />

   <add name="JsAssetHandler"
   path="*.js" verb="GET"
   type="BundleTransformer.Core.HttpHandlers.JsAssetHandler, BundleTransformer.Core"
   resourceType="File" preCondition="" />

3. To make AutoprefixCssPostProcessor is one of the default CSS-postprocessors, you need to make changes to the Web.config file. In the defaultPostProcessors attribute of \configuration\bundleTransformer\core\css element must be add AutoprefixCssPostProcessor to end of comma-separated list (for example, defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor").

Angular-cli from css to scss

For Angular 6 check the Official documentation

Note: For @angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.

For existing projects

In an existing angular-cli project that was set up with the default css styles you will need to do a few things:

1. Change the default style extension to scss

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:

ng config defaults.styleExt=scss

if you get an error: Value cannot be found. use the command:

ng config schematics.@schematics/angular:component.styleext scss

(*source: Angular CLI SASS options)

2. Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)

3. Point the CLI to find styles.scss

Manually change the file extensions in apps[0].styles in angular.json

4. Point the components to find your new style files

Change the styleUrls in your components to match your new file names

For future projects

As @Serginho mentioned you can set the style extension when running the ng new command

ng new your-project-name --style=scss

If you want to set the default for all projects you create in the future run the following command:

ng config --global defaults.styleExt=scss

---

Related Topics