I would like to use the meteoric package to create a very simple app with meteor and the ionic framework. Using the guide, I created the following very simple app:
Router.js:
Router.configure({
layoutTemplate: 'layout'
});
Router.route('/', function () {
this.render('MyTemplate');
});
Templates.html:
<template name="layout">
{{#ionBody}}
{{> ionNavBar}}
{{#ionNavView}}
{{> yield}}
{{/ionNavView}}
{{/ionBody}}
</template>
<template name="myTemplate">
{{#ionContent}}
Hello World!
{{/ionContent}}
</template>
The app loads without errors, and shows the content "Hello World!" without any styling at all. For example, why is the iosNavBar not being shown?
Look at the installation instructions for ionic-sass:
https://github.com/meteoric/ionic-sass
It says:
in your app's .scss file:
#import
'.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';
So in your meteor application, create a style.scss file with the above import statement. Now you should see the styles applied correctly.
for those who still find the icons missing add the second line to import ionicons
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionic-sass/ionic';
#import '.meteor/local/build/programs/server/assets/packages/meteoric_ionicons-sass/ionicons';
sample app referrence link
https://github.com/meteoric/contacts/blob/master/client/stylesheets/app.scss
Related
I am migrating to Vue3 from Vue2 and am trying to wrap my head around how to extend an existing vue component that has template, script and style sections in it. I have read about composables but I haven't seen an example that uses a combination of template/script/style sections. The only examples I see use a js/ts file which only contain the script section and then is usually inserted via useXYZ call.
Is this possible in Vue3? Do I have to use mixins or some plugin to make this happen?
// Foo.vue
<template>Some long template with lots of elements</template>
<script lang="ts">
import Vue from 'vue'
// Tons of functions and variables in here
export default Vue.extend({ [component "Foo" definition] })
</script>
<style>
<!--Tons of CSS here -->
</style>
and the extended component:
import Foo from './Foo'
export default Foo.extend({ [extended component definition] })
I've got a meteor project with a few different blaze layout templates and I'd like for them to each have their own LESS stylesheets. How do I import them on a per-layout basis, i.e. not importing them all in the main.less file?
The easiest approach is to literally import them from your template js files like so:
// File layout.html
<template name="layout">
<div class="layout-wrapper">
</div>
</template>
// File layout.less
.layout-wrapper {
display: flex;
justify-content: center;
}
// File layout.js
import './layout.html';
import './layout.less';
Template.layout.onCreated(function () {
// etc...
});
Now when you load the template's layout.js file, either by eager loading, imports, or dynamic imports, it will insert the compiled less to the page.
The problem is that in production, Meteor concatenates all the CSS into one big file, so you can't attach a specific file only to one template.
I got around this by basically defining an automatic wrapper div like so:
In your router, define a default layout e.g. in ironRouter:
Router.configure({
layoutTemplate: 'mainLayout',
});
In your mainLayout template, create a wrapping div something like this:
<div class="custom-page-wrapper-{{currentRouteName}}">
{{> yield}}
</div>
Define a global currentRouteName helper like this:
UI.registerHelper("currentRouteName",function(){
return Router.current() ? Router.current().route.getName() : "";
});
With that, every template that uses this layout template will automatically be wrapped in a div with a custom-page-wrapper-XXXX class that is unique to each template and based on the route's name (which is guaranteed to be unique or else ironRouter will raise an error).
After that, you can specify any template-specific styling within that class in any LESS file you want.
Although this isn't exactly the same as specifying a different file for each template, it functionally accomplishes the same thing with the only expense being an extra wrapper div.
Using a dir structure:
clients
main.css
main.html
main.js
server
main.js
imports
ui
partials
header
header.css
header.html
header.js
header.collection.js
body
body.css
body.html
body.js
body.collection.js
footer
footer.css
footer.html
footer.js
footer.collection.js
in the client/main.html (via main.js)
I would like to create something like: (simplified)
{{headercontent}}
{{bodycontent}}
{{footercontent}}
What is the import structure to add these partials in main.js?
Thanks all
You can create these partials by creating different templates for each of them.
I will give a short example. Let's say we want to create a page(finalTemplate) with four component- 1)header,2 )footer, 3)Sidebar and 4) Content.
The structure you have made is good for these. You just need to be careful with importing the required files while writing the codes.
Just as a caution, the collections has to be imported in both server and client startup.
To include the four components in the fial you just need to include those templates.
so my final page will look like
<template name="finalTemplate">
{{> header}} //Templates are imported by {{> TemplateName}} Not by {{TemplateName}}
{{> sidebar}}
{{> content}}
{{> footer}}
</template>
Example import structure for the example you asked for:
header.js
import './header.html'
import './header.css'
import '.header.collections.js'
In startup function for server, you should import all collections files as they are needed on server side.
i'm developing my first Angular2 app with Typescrypt. Here is an example of Component:
home.component.ts
import {Component} from '#angular/core';
#Component({
moduleId: module.id,
selector: 'home',
templateUrl: 'home.component.html',
styleUrls: ['home.component.css']
})
export class HomeComponent {
}
Since i have to process SASS files to get component-specific CSS, i created the following Gulp task:
gulpfile.js
gulp.task('create:styles', function(cb) {
return gulp.src('src/app/**/*.scss')
.pipe(sourcemap.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemap.write())
.pipe(gulp.dest(paths.dist + '/app/'));
});
As you can see i'm using sourcemaps Gulp plugin to map source files of styles.
As far as i know Angular injects component CSS files in HTML <style> element. So source mapping seems not to work for this reason.
Do you know any workaround to map CSS? I would figure out why i can't see the source files (.scss) in the inspection tools of browsers. What's wrong with sourcemaps plugin?
The answer is that there is nothing we can do at the moment. The feature request is still open on Angular2 Github repository: enter link description here
Taken from this SO answer and this article https://medium.com/#IMM9O/angular-cli-some-special-cases-f48059fb33e5
These flags on ng serve include sourcemaps.
ng serve -sm -ec
Or
ng serve --sourcemap --extractCss
It does not include source maps for the components stylesheets, as you asked, but only for global stylesheets that are included with the angular-cli.json config file. It's still better than nothing, especially because when inspecting an element, you can infer that the only CSS that is not mapped to a source file but to a <style> tag is the CSS of the component's stylesheet.
I'm using angular-cli version 1.0.0-rc.4
I'm creating a meteor package, very simple one like this
api.addFiles(['errors.js', 'errors_list.html', 'errors_list.js'], 'client');
I noticed that if I change above code to
api.addFiles(['errors.js', 'errors_list.js', 'errors_list.html'], 'client');
Meteor says: Template is not defined.
It is very hard to find out what caused this error. And why js file cannot go before html file in addFiles?
When you use Spacebars (the default templating engine), templates are defined in HTML files :
<template name="fooTemplate">
...
</template>
You can then access this template from everywhere else, be it HTML or JS:
<!-- HTML file -->
{{> fooTemplate}}
//JS file
Template.fooTemplate
If you try to do such an access before the template has been created, it will fail.
Meteor packages load files sequentially. This is how you control the load order.
If you try to use a template before it has been defined, it's undefined and will throw an exception when you try to access it (something along the lines of fooTemplate is undefined).
Thus, as in everything in programming, always initialize first and use later.
Put your HTML files before the JS, and you're good to go.