Q. How do I / is it possible to split my /SCSS directory into multiple output .css files?
I have a part of the application /admin that I don't want to serve to the standard user for performances reasons. Also, there are some standalone landing pages that are not part of the 'main' site, so could do with their own bundle.
Example SCSS structure:
/scss
- partials
- modules
Compile into:
main.css
admin.css
landing.css
Note: I'm using webpack
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 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.
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.
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.