I am trying to setup a basic ionic 2 leaflet app using ionic 2.0.0-beta.24 and leaflet 0.7.7. After starting the default project with
ionic start test --v2 --ts
if you open the ionic.config.js file you will see the message
Ionic CLI is no longer responsible for building your web assets, and now
relies on gulp hooks instead. This file was used for exposing web build
configuration and is no longer necessary.
If this file is executed when running ionic commands, then an update to the
CLI is needed.
If your version of the Ionic CLI is beta.21 or greater, you can delete this file.
In older versions of ionic 2 you would put the directories you would want to include in this file like this:
sass: {
src: ['app/theme/app.+(ios|md).scss'],
dest: 'www/build/css',
include: [
'node_modules/ionic-framework',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
},
Now i guess that isn't an option, so how do i bring in the css stylesheet i need, because doing #import "leaflet"; in app.core.scss errors out because it can't find the folder.
Any help would be greatly appreciated. I am able to use the Leaflet js library because i did.
npm install --save leaflet
typings install --ambient --save leaflet
The map is loading without an issue, but the tiles are scrambled which is a sign the css sheet is not loaded. If i put in a stylesheet link in it works without an issue, but i would prefer not to have to rely on a CDN.
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
Thanks.
So just by posting this question it made me start tracing the documentation for ionic gulp sass-build task.
The example they provide was a great help. If I update the default gulpfile.js code around line 55 from:
gulp.task('sass', buildSass);
to
gulp.task('sass', function(){
return buildSass({
sassOptions: {
includePaths: [
'node_modules/ionic-angular',
'node_modules/ionicons/dist/scss',
'node_modules/leaflet/dist'
]
}
})
});
It solves my issue. I also needed to call #import "leaflet" in the page that needed the leaflet css.
Related
I'm using a FileGator for displaying the data in the browser.
it was built with Vue.js for frontend.
But I'm not able to customize all the CSS of the app even though I added customized CSS in the app.css in the dist folder. Hope someone gives me a solution.
Folder dist/ is where compiled css and js are placed. If you're using npm build process as explained here https://docs.filegator.io/development.html dist folder will be overwritten each time npm build is triggered.
If you don't want to build with npm then you can use provided configuration.php file to add a simple style:
'add_to_head' => '<style>body{background:red}</style>',
or your own css file:
'add_to_head' => '<link href="/somewhere/your.css" rel=stylesheet>',
I am currently porting one of my Cordova+Angular2 projects to Ionic 3.8+Angular 4.1.3. My project uses a few 3rd part JS and CSS libraries like Font awesome, Slick carousel etc. In the previous version, I used webpack for packaging my app and below is how I managed 3rd party css and JS.
.angular-cli.json
"styles": [
"styles.css",
"css/animate.css",
"css/font-awesome.css",
"css/slick.css",
"css/slick-theme.css"
],
"scripts": [
"scripts/jquery-3.2.1.min.js",
"scripts/slick.min.js",
"scripts/slideout.min.js"
],
How do I achieve the same with Ionic? I have gone through the solutions available online, but most of them recommend combining the css to the global scss file, or even tweaking ionic. Is there a straightforward solution for this as with angular cli?
In Ionic 3 this is actually pretty tricky, we'll have to dig a bit into Ionic App Scripts. The easier way is to add a link to your index.html as Duannx points out in the comments.
The good news is: In Ionic v4 there will be no Ionic App Scripts anymore and you'll be able to manage your custom CSS as pointed out above using an angular.json file. See the official v4 announcement here.
If we want to do it the right way in Ionic v3 we'll have to do the following after installing our custom CSS solution via npm e.g.:
npm install slick-carousel
1. Copy and edit the sass.config.js from Ionic App Scripts
Go to node_modules/#ionic/app-scripts/config and copy the sass.config.js file. I copied it to my project's root directory. Then edit the file: Add paths to your custom CSS to the includePaths section, e.g. I added the path to the slick-carousel node_module:
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'node_modules/slick-carousel/slick'
],
2. Link our new sass.config.js in package.json
Now let's link our new SASS configuration in our package.json. This is well documented in the App Scripts readme. Add a config section with following content:
"config": {
"ionic_sass": "./sass.config.js"
}
As pointed out before my new sass.config.js is in my projects root directory. If you copied it elsewhere make sure to adjust the path accordingly.
3. Import custom css files using #import
Now we can finally import our custom CSS using #import. A good place to do this is variables.scss.
Sad thing is: For slick-carousel we're not done yet. We'll also have to copy some fonts. But this shouldn't be to hard, we can do the same as above with copy.config.js and editing the copyFonts section.
I'm making a Vue 2 component. But when I npm link it in other project and imported (I'm importing it in a random component doing: import InputTag from 'vue-input-tag' ) I'm seeing this:
Failed to mount component: template or render function not defined.
(found in component <input-tag>)
Any ideas? I'm going crazy.
Here is the repo: https://github.com/matiastucci/vue-input-tag/tree/wtf
Thanks!
I hit this same issue when upgrading an old (v0.11.x) Vue.js app. Vue.js 2.x introduces compiled (render-function) templates. Additionally, these are the new default.
Here's more info from the 2.x docs:
http://vuejs.org/guide/installation.html#Standalone-vs-Runtime-only-Build
In my case, I was using browserify and partialify to include the templates (as strings), so there was no pre-compilation to render function happening.
To fix this, I used aliasify to make sure the vue requirement was fulfilled with the "Standalone" copy of Vue.js rather than the "Runtime-only" version.
I did the following:
npm install --save-dev aliasify
edited the package.json to include this code:
"aliasify": {
"aliases": {
"vue": "vue/dist/vue.js"
}
}
added -t aliasify to my browserify command, which now reads:
browserify -e src/main.js -t aliasify -t partialify -o build/bundle.js
You can do this with webpack also--and there's info in the Vue.js docs for that.
I hope that helps!
How can I use preprocessors in my ng2 app? I'm using angular-cli and the original docs are not clear enough for me. Besides, I want to use the styles globally, not only component-wide.
Install your CSS compiler: Search npm for your preffered extension language.
Tested and recommended for SASS: npm install node-sass --save-dev
Add your "to be processed" file to src/assets/css (with the normal file extension, e.g. .sass)
Add the style ref to the index.html file:
<link rel="stylesheet" href="assets/css/whatever.css"> - note the .css file extension.
Update your build file (angular-cli-build.js) with the folder of your "to be processed" files. This object HAS to be placed before the vendorNpmFiles-array.:
sassCompiler: { //(lessCompiler or stylusCompiler)
includePaths: [
'app/assets/css' //Only the folder, not your file!
]
}
Bonus answer: Why don't I use direct paths to files instead of the includePath? Because you may want to use variable files, so it could get really messy with absolute paths!
The Angular CLI has built in support for Sass/SCSS, Less, and Stylus. See here.
As of the Webpack update to the CLI, there are no extra steps other than renaming your stylesheets with the appropriate extension.
For the previous System.js/Broccoli versions, it was also necessary to install the preprocessor packages to your app, like so: npm install node-sass --save-dev.
It will automatically process the stylesheets within and under the src folder.
I used yo webapp or yo angular to create new a project, and I received Bootstrap include is version 2.3.2, but I want use the latest version of Bootstrap.
How can I update the Bootstrap package with command prompt and later update when create new webapp or yo angular, choose include Twitter Bootstrap is last version?
Yeoman's webapp & angular generators grab Sass for Bootstrap, which is based on the 2.3.2 build of Twitter Bootstrap.
After you run yo webapp or yo angular, you can add Bootstrap 3.0 by running the following command.
$ bower install --save bootstrap
This will download Bootstrap 3.0 for you.
#micjamking answer is a really good hint, but since with Yeoman things should be easier, I'll save you some googling:
yo angular - Say 'No' to Bootstrap here - otherwise it'll download 2.x version
bower install --save bootstrap
npm install --save-dev grunt-bower-install
edit Gruntfile.js - insert marked lines:
// ...
} catch (e) {}
grunt.loadNpmTasks('grunt-bower-install'); // INSERT
grunt.initConfig({
yeoman: yeomanConfig,
'bower-install': { // INSERT BEGIN
target: { // .
html: '<%= yeoman.app %>/index.html', // .
ignorePath: '<%= yeoman.app %>/' // .
} // .
}, // INSERT END
watch: {
coffee: {
files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
tasks: ['coffee:dist']
// ...
edit app/index.html - insert :
<!-- bower:css -->
<!-- endbower -->
and:
<!-- bower:js -->
<!-- endbower -->
where appropriate - those will inject references to bower-managed resources (bootstrap's stylesheet and JS in our case).
update 10/5/2013: Consider placing bower:xxx inside build:xxx.
In our case, bower:css inside build:css and bower:js inside build:js.
This is needed for minification to work when assembling dist. However I consider this approach not so perfect - see Remarks below. I'm excused a little bit, since this is the very same way the bootstrap version obtained by Yeoman by default gets included in our app :-P
Note: To get css minification working you might need changing build:css(.tmp) to build:css({.tmp,app}).
grunt bower-install
Ready. Now run server (grunt server) and Bootstrap 3 will be available.
Remarks - Update 10/5/2013 - inspired by #Luke's enquiry in a comment:
Based on this I added one sub-step to make dist minification work.
Bower's injecting works, so does minifying, however I'm not so happy with this approach.
Reasons:
[minor] We're not using already minified resources obtained by bower.
Minifying ALL kinds of CSS/JS into a SINGLE file is a pretty lame idea. A better way to include external dependencies in your application would be to have a switch between CDN-fetch (dist) and local copies obtained with bower (dev). Sth like maven profiles.
Depending on the application size, downloading all-in-one resources, particularly JavaScripts, will slow down first encounter with our application.
Later on the rest of the application will be loaded faster, true, but the first time user enters our page, those bulky single-filers will have to be downloaded preemptively.
#yao tony also hadn't found this approach cool - see the referenced question.
Update Nov 2013: You can use grunt's cdnify task. It's cool
Software versions I was using:
user#machine:~/somewhere $ yo -v; grunt --version; bower -v
1.0.4
grunt-cli v0.1.9
grunt v0.4.1
1.2.6
For sass Bootstrap update:
This Works for me:
bower install angular-bootstrap
bower install sass-bootstrap
and select the new versions of both...
maybe should add a --save
Note: sass-bootstrap is bean deprecated, is now a official bower for sass version of bootstrap https://github.com/twbs/bootstrap-sass but i dont tried it.