I am using the Play! Framework ( 2.6.2 ), Scala ( 2.12.2 ) and trying to integrate LESS into it.
I was using this tutorial on their documentation website.
In my build.sbt file this is the code in place:
lazy val root = (project in file(".")).enablePlugins(PlayJava, PlayEbean, SbtWeb)
includeFilter in (Assets, LessKeys.less) := "*.less"
excludeFilter in (Assets, LessKeys.less) := "_*.less"
LessKeys.compress in Assets := true
And in my plugin.sbt file I've added:
addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.1.2")
I've got 2 files with .less extention. main.less and login.less in a /css folder under /public directory.
When I compile and run the project in my target folder the files stay as .less files and don't get compiled into .css files.
In my HTML template code I have this line:
<link rel="stylesheet" media="screen" href="#routes.Assets.versioned("css/login.css")">
The link to the stylesheet works if I change the extention from login.less to login.css but the variables don't seem to be accessible in the login.less file.
The link to the stylesheet doesn't work with the .css extention as expected because the framework doesn't seem to be compiling the files to .css, it just seems to leave them as .less files. Therefore I'm just getting a 404 on the .css file. If i change the extention in the link to .less it then works fine but variables I've imported from main.less to login.less don't work.
Is there a step I'm missing? Can somebody explain why the framework would not compile the .less files to .css files in my target folder?
EDIT 1: After trying the fix suggested by #marcospereira: I think the application is trying to compile both files but also returns me an error and application doesn't run at all.
[info] LESS compiling on 2 source(s)
-------
Unexpected exception
JsTaskFailure: java.lang.NoSuchMethodError: org.mozilla.javascript.ScriptRuntime.setObjectProp(Ljava/lang/Object;Ljava/lang/String;Ljava/lang/Object;Lorg/mozilla/javascript/Context;Lorg/mozilla/javascript/Scriptable;)Ljava/lang/Object;
at io.apigee.trireme.node10.main.trireme._c_anonymous_1(trireme.js:37)
at io.apigee.trireme.node10.main.trireme.call(trireme.js)
at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:394)
at org.mozilla.javascript.ScriptRuntime.doTopCall(ScriptRuntime.java:3102)
at io.apigee.trireme.node10.main.trireme.call(trireme.js)
at io.apigee.trireme.core.internal.ScriptRunner.runScript(ScriptRunner.java:762)
at io.apigee.trireme.core.internal.ScriptRunner$4.run(ScriptRunner.java:702)
at org.mozilla.javascript.Context.call(Context.java:488)
at org.mozilla.javascript.ContextFactory.call(ContextFactory.java:504)
at io.apigee.trireme.core.internal.ScriptRunner.call(ScriptRunner.java:697)
at io.apigee.trireme.core.ScriptFuture.run(ScriptFuture.java:183)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1149)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:624)
at java.lang.Thread.run(Thread.java:748)
-------
You need to install node.js on your machine.
If you do not have node.js installed then it will fall back to the Trireme Java-based JavaScript engine, which does not work very well and is resulting in that error
Managed assets needs to be inside app/assets. From the docs:
Compilable assets in Play must be defined in the app/assets directory. They are handled by the build process, and LESS sources are compiled into standard CSS files. The generated CSS files are distributed as standard resources into the same public/ folder as the unmanaged assets, meaning that there is no difference in the way you use them once compiled.
So, you need to move your files from public/css to app/assets/css.
Related
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'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.
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'm using the Yeoman stack to bootstrap an application and had a question on how CSS files should be handled. (I've uploaded a sample on Github : https://github.com/ddewaele/jQueryDataTablesGrunt)
The basic question is : How do you go about handling different CSS files
during development (when running grunt serve)
when packaging the app (when running grunt build).
I have installed a number of libraries through bower that come with CSS files.
For example the jQueryDataTables library has the following CSS
bower_components/datatables/media/css/jquery.dataTables.css
Now, the way I understand it is that I should never reference this jquery.dataTables.css file directly in my index.html (I hope this assumption is correct).
My index.html should only contain
<link rel="stylesheet" href="styles/main.css">
I assume that this styles/main.css will be generated by the grunt workflow and will be correct both in dev mode, as well as in dist mode.
I'm puzzled by a couple of things
How should I tell grunt that I need to include for example bower_components/datatables/media/css/jquery.dataTables.css
Do I do need to reference that jquery.dataTables.css in my index.html, or in my Gruntfile.js, or simply drop it in app.styles ?
How does grunt decide what CSS files it needs to assemble into a single main.css
How does grunts behavior differ between grunt serve and grunt serve dist
Here's what I found :
grunt serve
When calling grunt serve , a CSS file is generated called .tmp/styles/main.css,
That is in fact the CSS file that is used by the app when it launched by 'grunt serve'.
That main.css file only contains stuff coming from the app/styles/main.scss file.
Other CSS files that are put in app/styles/ are not being picked up by grunt serve.
grunt serve:dist
When calling grunt serve:dist, a CSS file is generated called dist/styles/2314bw1.main.css
That is in fact the CSS file that is used by the app when it launched by grunt serve:dist.
That main.css file contains everything that it found in app/styles/*.css,
So the basic issue is that when running grunt serve , the generated main.css does not all the classes from all the css files found in app/styles/*.css.
However, when packaging the app grunt build or grunt serve:dist, it does contain all classes from all the css files found in app/styles/*.css.
How do I configure my app / grunt to use these external CSS, and how do I get to a situation that works during development, as well as during packaging.
I'm not familiar with Yeoman but it look likes it's running gruntjs underneath. You can edit the tasks to include plugin specific styles.
This is your gruntfile.js
How does grunt decide what CSS files it needs to assemble into a single main.css ?
Drop your plugin specfic styles inside "app/styles". You can give it a special folder if you want to. Then add to your main.scss. Sass will compile everything down in the main.css.
First in console:
cp jquery.dataTables.css jquery.dataTables.scss
Then add the import into main.scss
#import "jquery.dataTables"
How does grunts behavior differ between grunt serve and grunt serve dist?
serve:dist does this(see code below), it builds your files, opens a link to your server, creates a dummy webserver to serve your files using connect
if (target === 'dist') {
return grunt.task.run(['build', 'open:server', 'connect:dist:keepalive']);
}
serve on the other hand watches changes to your files.
I'm running asdocs from a .bat file with flex sdk 3.2.0 (I have replaced my long project root folder with PROJECTROOT):
"C:\Program Files (x86)\Adobe\Flex Builder 3\sdks\3.2.0\bin\asdoc" -source-path . "C:\Program Files (x86)\Adobe\Flex Builder 3\sdks\3.2.0" "_PROJECTROOT_\Components\src" "C:\_PROJECTROOT_\assets" -doc-sources .
PAUSE"
Unforunately, I keep getting errors similar to this:
"_PROJECTROOT_\assets\styles.css(344): Error: Invalid Embed directive in stylesheet - can't resolve source 'Embed(source = "close_button.png")'.
downSkin: Embed(source="close_button.png");"
I really don't understand this as "close_button.png" is in the same folder as styles.css. When I build the project from within flexbuilder, it compiles it fine and does not throw any errors.
Does anyone know what I'm doing wrong?
It's not using your folder with the CSS as the root folder when it's working. It's looking for the assets in the folder you are running the commands from.
Try adding the assets folder to your source path.
I had a similar problem, and an answer I found elsewhere indicated to put a slash at the beginning of the asset path. That is, instead of
Embed(source="close_button.png")
rather
Embed(source="/close_button.png")