I have a .css file in IntelliJ IDEA, but it has a LESS content.
This is why IntelliJ IDEA shows errors when it analyzes the correctness of the .css file:
Unknown CSS at-rule
a term expected
Changing the file extension is not a solution because it's not my own project.
How can I force IntelliJ IDEA to open the .css files as .less files in order to be able to recognize LESS tricks (E.g.: #xyz: 100px;)?
Details
IntelliJ IDEA ULTIMATE 2016.2
Windows 7
File > Settings... > Editor > File Types > Less > Add *.css > OK > Reassign wildcard > OK
Related
Google Chrome dev tools all of sudden stopped showing the CSS file names on my local drive - see screen shot at link:
Link to CSS Dev tools no file names
However when I goto the WWW it works just fine - there I can see the CSS file names?
Can someone please help - I don't think it was me as I have been using them for years and it has worked just fine.
See Web screen shot:
Web Site link dev tools with file names
I just noticed this today
Thank you.
I wonder if it is a symptom of using Workspaces in developer tools. Have you setup workspaces and mapped network resources locally? I haven't used them much, but I messed around to see if I could replicate your problem.
I didn't see exactly what you are seeing here, but the CSS file name went away when I setup a workspace, leaving only localhost/ .
Without workspace:
With workspace:
Please try the following:
Open DevTools
Click the settings cog in the upper right.
Scrolling to the bottom of the general tab and clicking "Restore defaults and reload."
Workspace references sourcemaps from its root
I just fixed this issue by generating my sourcemaps so that they reference their source files (less in my case) relative from the root of my workspace. When not using dev tools workspace, it works because they are able to find the source files relative to the directory that the sourcemap is in. When not referencing from a workspace, this breaks since Chrome appears to reference from the workspace root. Ran into the same issue for JS source maps as well.
MyWorkspace (node project root)
> bower_components
> node_modules
> routes
> wwwroot (public static root)
> app (AngularJS client)
> assets
> css
> app.css
> maps
> app.css.map
> less
> bootstrap (less source)
> app.less
> app.js
> package.json
So for me, the sourcemap "sources": array must reference my less source files like so:
app.css.map
{ "version":3,
"sources": [
"/wwwroot/assets/less/app.less",
"/wwwroot/assets/less/...."....
In addition to this I had to setup node so that when it runs in dev mode it exposes additional routes for /wwwroot/ as well as /node_modules/ so that it could link the routes correctly to my workspace.
I'm using gulp-less-sourcemaps to build the CSS sourcemaps and my less build step looks like (in case anyone's struggling with gulp) -
.pipe(less({ sourceMap: { sourceMapRootpath: '/wwwroot/assets/less' }}))
If you change the path of your CSS when Chrome is currently mapping, it may map the invalid folder path.
My solution it is:
Open DevTools
Go to settings
Go to workspace menu
Delete invalid folder
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
I just started working with scss a few days ago (with Webstorm), and it seem to auto generate/update the css file after saving the scss file. Unfortunately, when I save the scss file now, no changes are made to the css file. I was working on these files from a different location, so I am guessing that the Webstorm settings might be different. I thought file watchers might have something to do with it, but I am not sure what goes in the program field. I really have no idea why this is happening.
No, saving a .SCSS file does not automatically compile the final stylesheet file. What you need to do is set up a watch. There are a number of ways to do this (and a number of programs that'll do it for you).
The most straight forward is through the command line. Assuming you have the SASS gem installed (and you're in a ruby environment), do the following in the command line:
Navigate to the folder in which your .scss file/s are kept.
Run the following command: sass --watch style.scss:style.css
Note: The above assumes that both your .scss and .css files are named style, adjust accordingly if they are not. Also, if your .css and .scss files are in different directories you'll have to adjust the paths accordingly.
Remember, sass --watch then yourScssFile.scss : yourCssFile.css
Alternatively you can use an app, like LiveReload to watch the files for you. this'll take a bit of configuration, but it may be a little easier for you if you're only just getting started in the wornderful world of SCSS/SASS
Yopu can use File Watchers in WebStorm to auto-update the CSS file on changing SCSS; but this would also require installing the external SCSS compiler (SASS gem). Please refer to http://www.jetbrains.com/webstorm/webhelp/transpiling-sass-less-and-scss-to-css.html#d104715e458 for more information
I am using WinLess to compile a *.less file into a *.css file.
The file is reported as compiling successfully, however no *.css file is being created.
Other *.less files appear to compile and create the *.css files normally, so I do not think this is an installation issue.
Any ideas on why a particular *.less file will not compile while others will?
Edit: The contents of the problem file are included in the main .less file through an #import statement. If I comment out the #import statement and paste the original contents of the imported *.less file into the main file then everything compiles correctly. Other files #import correctly -- just this one has an issues being #imported.
Very odd.
I've had same problem with both winless and simpless (mac). Usually this is caused by a line of code that for some reason is stopping the compilation but not giving an error.
Have you tried double-checking your LESS syntax? Sometimes I paste code into my LESS file, and it breaks the compilation process, for example
#sample-class { ... }
the ellipsis is not legal LESS code, and WinLess stops compiling CSS until it's fixed.
Just had the same issue. Re installed it and it started working fine.
Is there a way to get Aptana Studio 3 to not upload specific file extensions, such as .sass for example?
Thanks!
If you already have the project set up with a remote server, you could right-click on a .sass file in the project and select Deploy > Cloak this file type.
You could also go to Preferences > Aptana Studio > Remote and add .sass to the list of file extensions to be ignored.