Comment inclure des fichiers de polices ui-grid dans le projet
J'ai été coincé avec anjularjs ui-grid, il montre des symboles chinois à la place d'icônes. Après avoir approfondi le sujet, je me rends compte que je dois utiliser certains fichiers de polices fournis par l'équipe ui-grid, j'ai téléchargé les fichiers et les ai inclus dans mon projet, mais je ne reçois toujours pas les images d'icônes et les polices appropriées. dans le projet?
Ce sont les noms de fichiers que j'ai téléchargés et inclus dans mon projet:
1 ui-grid.eot
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff
J'ai eu le même problème, maintenant il est corrigé comme suit
J'ai mis à jour la grille d'interface utilisateur avec la dernière version stable (v3.0.0-rc.3) ou la version instable (v3.0.0-rc.16).
thenplacez les fichiers de polices dans le même répertoire que votre fichier ui-grid.css, comme ceci
app
- lib
- ui-grid.js
- ui-grid.css
- ui-grid.eot
- ui-grid.svg
- ui-grid.ttf
- ui-grid.woff
ou
vous pouvez ouvrir le CSS et changer le chemin du fichier à l'emplacement relatif dans l'URL @ font-face
vérifier ici http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation
J'utilise Grunt je devais ajouter
copy: {
dist: {
files: [
...
//font di ui grid
{
expand: true,
flatten: true,
dest: 'dist/styles/',
src: ['bower_components/angular-ui-grid/ui-grid.ttf',
'bower_components/angular-ui-grid/ui-grid.woff',
'bower_components/angular-ui-grid/ui-grid.eot',
'bower_components/angular-ui-grid/ui-grid.svg'
]
}
]},
au Gruntfile.js Pour copier les polices ui-grid dans le répertoire style.
Avec Gulp, vous pouvez ajouter cette tâche dans le fichier build.js.
gulp.task('copyfonts', function() {
gulp.src('./bower_components/angular-ui-grid/**/*.{ttf,woff}')
.pipe(gulp.dest(path.join(conf.paths.dist, '/styles/')));
});
Je sais qu'il est un peu tard, mais je veux juste partager ma réponse. J'utilise bower pour installer ui-grid et gruntjs pour charger des fichiers. C'est presque la même chose avec Panciz, mais changez-le en *.{ttf,woff,eot,svg} pour obtenir tous les fichiers de polices nécessaires sans les spécifier.
ajoutez ceci dans la copie:
copy: {
dist: {
files: [
//other files here
, {
expand: true,
flatten: true,
cwd: '<%= yeoman.client %>',
dest: '<%= yeoman.dist %>/public/app', //change destination base to your file structure
src: [
'*.{ttf,woff,eot,svg}',
'bower_components/angular-ui-grid/*',
]
}
]
}
}
J'utilise Gulp et j'ai ajouté une tâche fonts:dev à ajouter en tant que dep à ma tâche serve:
gulp.task('fonts:dev', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.tmp + '/serve/fonts/'));
});
Cela a résolu le problème pour moi. Plus de contexte ici .
Dans mon projet, j’utilise généralement grunt pour placer les fichiers de polices dans le répertoire build/assets et les fichiers fournisseurs dans le répertoire build/vendor/lib-name.
Mais ui-grid.css a un chemin relatif pour obtenir le fichier de police et n’a aucun mode pour configurer un emplacement différent sans modifier votre fichier css. Mais je pense que ce n'est pas une bonne idée, car vous devez ensuite modifier ce fichier pour chaque mise à jour du fournisseur.
Vous pouvez donc configurer votre grunt pour qu'il mette également cette police avec vos fichiers de fournisseur.
Ceci est votre build.config.js:
module.exports = {
...
vendor_files: {
...
js: [
'vendor/angular/bundle.min.js',
'vendor/angular-ui-grid/ui-grid.min.js',
],
css: [
'vendor/angular-ui-grid/ui-grid.min.css',
],
uigrid_fonts: [
'vendor/angular-ui-grid/ui-grid.woff',
'vendor/angular-ui-grid/ui-grid.ttf',
'vendor/angular-ui-grid/ui-grid.eot',
'vendor/angular-ui-grid/ui-grid.svg',
],
...
}
...
}
Ensuite, sur votre Gruntfile.js, vous pouvez gérer ce fichier:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
//.. other require
var userConfig = require('./build.config.js');
var taskConfig = {
copy: {
//.. other copy task
build_vendor_fonts: {
files: [
{
src: [ '<%= vendor_files.fonts %>' ],
dest: '<%= build_dir %>/assets/fonts/',
cwd: '.',
expand: true,
flatten: true
}
]
},
build_uigrid_font: {
files: [
{
src: [ '<%= vendor_files.uigrid_fonts %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true,
}
]
},
build_vendor_css: {
files: [
{
src: [ '<%= vendor_files.css %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
build_appjs: {
files: [
{
src: [ '<%= app_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
build_vendorjs: {
files: [
{
src: [ '<%= vendor_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
}
},
};
grunt.registerTask('build', [
'clean',
'concat:build_css',
'copy:build_vendor_fonts',
'copy:build_uigrid_font',
'copy:build_vendor_css',
'copy:build_appjs',
'copy:build_vendorjs',
'index:build'
]);
//..
}
Quasiment la même réponse que Panciz et Vicruz, mais j’ai spécifié les répertoires pertinents légèrement différemment:
copy: {
dist: {
files: [{
// other files here...
}, {
expand : true,
cwd : 'bower_components/angular-ui-grid',
dest : '<%= yeoman.dist %>/styles',
src : ['*.eot','*.svg','*.ttf','*.woff']
}]
},
Si vous installez ui grid en utilisant 'bower install', les fichiers doivent être installés à l'emplacement approprié. Le problème que nous avons eu est que nous utilisons ui-router, ce qui nécessite de réécrire toutes les demandes dans index.html. Nous avons dû ajouter les extensions de police à nos règles de réécriture afin que Angular puisse les charger. Nous utilisons un plugin middleware pour une exécution locale. Sur le serveur Apache/Nginx, le concept est le même.
middleware: function (connect) {
return [
modRewrite(['!\\.html|\\.js|\\.svg|\\.woff|\\.ttf|\\.eot|\\.css|\\.png$ /index.html [L]']),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect.static(appConfig.app)
];
}