프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

Programing

프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

crosscheck 2020. 11. 20. 08:39

프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

글꼴 라이브러리 글꼴을 굉장하게 사용하고 있습니다. 프로젝트가 grunt로 빌드 / 추가되지 않은 경우 작동합니다.

그러나 grunt로 프로젝트를 빌드 할 때 작동하지 않습니다. 콘솔에서이 오류가 발생합니다 : ... / fonts / fontawesome-webfont.woff? v = 4.0.3 404 (찾을 수 없음)

여만과 함께 프로젝트를 발판했습니다.

이것은 index.html의 내 심판입니다.

    <!-- build:css styles/fontawesome.css -->
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <!-- endbuild -->

어떤 아이디어가 잘못 될 수 있습니까?

업데이트 / bower_components / font-awesome / fonts 폴더를 dist / fonts로 복사해야합니다. 이것은 grunt 파일에서 수행되어야합니다. 아마도 "복사"옵션에서

copy: {
  dist: {
    files: [{
      expand: true,
      dot: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>',
      src: [
        '*.{ico,png,txt}',
        '.htaccess',
        'bower_components/**/*',
        'images/{,*/}*.{gif,webp}',
        'styles/fonts/*'
      ]
    }, {
      expand: true,
      cwd: '.tmp/images',
      dest: '<%= yeoman.dist %>/images',
      src: [
        'generated/*'
      ]
    }]
  },

그러나 나는 이것을 어디에 포함해야할지 잘 모르겠습니다.

나는 같은 문제가 있었다. 다음 코드는 내 문제를 해결했습니다.

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= config.app %>',
            dest: '<%= config.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.webp',
                '{,*/}*.html',
                'styles/fonts/{,*/}*.*'
            ]
        },{
            expand: true,
            dot: true,
            cwd: 'bower_components/bootstrap/dist', // change this for font-awesome
            src: ['fonts/*.*'],
            dest: '<%= config.dist %>'
        }]
    }
}

프로젝트에서 SASS를 사용하는 경우 관심있는 사람이 있다면 grunt 파일을 변경하지 않는보다 간단한 방법을 찾았습니다.

http://likesalmon.net/use-font-awesome-on-yeoman-angularjs-projects/

기본적으로 main.scss 파일 상단에이 두 줄을 포함하면 글꼴이 작동합니다.

$fa-font-path: "/bower_components/font-awesome/fonts/";
@import "font-awesome/scss/font-awesome";

yeoman의 완전한 grunt 작업 스택을 사용하는 경우 useminPrepare작업은 build:css주석에 넣은 모든 스타일 시트에서 결합 된 스타일 시트를 작성합니다 . ( https://github.com/yeoman/grunt-usemin추가 정보는 참조 ) 빌드 프로세스가 완료된 후이 파일은 "vendor.234243.css"와 비슷하게 스타일 폴더에 복사됩니다. 그렇기 때문에 글꼴 경로가 더 이상 유효하지 않습니다. 이 문제를 해결할 수있는 방법은 두 가지 이상입니다.

build:css블록 에서 font-awesom css를 제거 할 수 있습니다 .

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- build:css styles/fontawesome.css -->
 this will be processed by useminPrepare 
<!-- endbuild -->

gruntfile의 추가 grunt 작업을 통해 글꼴 folder을 styles폴더에 형제로 복사합니다 .

copy.dist.files에 다음을 추가하여 문제를 해결할 수있었습니다.

{
   expand: true,
   flatten: true,
   src: 'bower_components/components-font-awesome/fonts/*',
   dest: 'dist/fonts' 
}

그러면 필요한 곳에 글꼴이 복사됩니다.

copy: {
        dist: {
            files: [{
                expand: true,
                dot: true,
                cwd: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                src: [
                    '*.{ico,png,txt}',
                    '.htaccess',
                    'images/{,*/}*.webp',
                    '{,*/}*.html',
                    'styles/fonts/{,*/}*.*'
                ]
            }, {
                expand: true,
                dot: true,
                cwd: 'app/bower_components/fontawesome/fonts/',
                src: ['*.*'],
                dest: '<%= yeoman.dist %>/fonts'
            }]
        },

이를 수행하는 가장 간단한 방법은 자신 bower.json의 overrides속성 으로 이동 하여 속성을 추가하는 것 입니다.

{
  "name": "xxx",
  "version": "x.x.x",
  "dependencies": {
    ...,
    "fontawesome": "~4.0.3"
  },
  "devDependencies": {
    ...,
  },
  "overrides": {
    "fontawesome": {
      "main": [
        "./css/font-awesome.css"
      ]
    }
  }
}

당신은에서 글꼴을 copypasta해야합니다 fontawesome/fonts귀하의 폴더 app/fonts를 수동으로 폴더. 편집 Gruntfile또는 SCSS기타 필요하지 않습니다.

내 솔루션은 CDN 접근 방식을 사용하는 것입니다.

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">

어떤 이유로 든 답변이 작동하지 않았습니다.

위에서 대답했듯이 이것은 나에게도 매우 잘 작동했습니다.

 // Copies remaining files to places other tasks can use
    copy: {
      dist: {
        files: [{
          expand: true,
          dot: true,
          cwd: '<%= yeoman.app %>',
          dest: '<%= yeoman.dist %>',
          src: [
            '*.{ico,png,txt}',
            '.htaccess',
            '*.html',
            'scripts/components/{,*/}*.html',
            'images/{,*/}*.{webp,png,jpg,jpeg,gif}',
            'fonts/*',
            'styles/fonts/{,*/}*.*',
            'services/{,*/}*.json',
            'services/mocks/{,*/}*.json'
          ]
        }, {
          expand: true,
          cwd: '.tmp/images',
          dest: '<%= yeoman.dist %>/images',
          src: ['generated/*']
        }, {
          expand: true,
          cwd: '.tmp/concat/scripts',
          dest: '<%= yeoman.dist %>/scripts',
          src: '{,*/}*.js'
        }, {
          expand: true,
          cwd: '.tmp/concat/styles',
          dest: '<%= yeoman.dist %>/styles',
          src: '{,*/}*.css'
        }, {
          expand: true,
          cwd: '<%= yeoman.app %>',
          src: 'styles/Bootstrap/fonts/bootstrap/*',
          dest: '<%= yeoman.dist %>'
        }, {
          expand: true,
          cwd: 'bower_components/font-awesome/fonts/',
          src: ['*.*'],
          dest: '<%= yeoman.dist %>/fonts'
        }]
      }

해결책은 다음과 같습니다 : https://stackoverflow.com/a/32128931/3172813

{ 
  expand: true,
  cwd: '<%= yeoman.app %>/bower_components/font-awesome', 
  src: 'fonts/*', 
  dest: '<%= yeoman.dist %>' 
}

나는 내가 뭘 잘못하고 있는지 모르지만 제안 된 솔루션 중 어느 것도 나를 위해 일하지 않았습니다. 내가 무엇을 시도하든 프로덕션 (배포) 릴리스에는 아이콘이 표시되지 않습니다.

결국 https://github.com/philya/font-awesome-polymer-icons-generator 및 https://github.com/philya/font-awesome-polymer-icons 구성 요소를 사용했습니다.

글꼴 멋진 폴리머 아이콘 생성기

참고 : Python 필요

프로젝트의 아이콘 (사용중인)에 대해 글꼴 멋진 SVG 아이콘 세트를 생성 할 수 있습니다.

예를 들어, code, line-chart, github-alt프로젝트에 아이콘 을 원한다고 가정하면 다음과 같이 생성합니다.

./makefaicons.py myappname code line-chart github-alt

이렇게하면 파일이 생성됩니다 build/myappname-icons.html. 이 파일은 다른 구성 요소와 마찬가지로 내 구성 요소로 가져와야합니다.

<link rel="import" href="<pathToFile>/myappname-icons.html">

그런 다음 다음과 같은 글꼴 멋진 아이콘을 얻을 수 있습니다.

<core-icon icon="myappname:line-chart"></core-icon>

즉, 아이콘 세트를 만들 때 지정한 이름을 일반 글꼴 멋진 이름 앞에 붙입니다.

글꼴 멋진 폴리머 아이콘

미리 제작 된 멋진 글꼴 아이콘 세트를 가져올 수도 있습니다.

bower install font-awesome-polymer-icons

이렇게하면 배포 크기에 300KB 이상이 추가되고 작성자는 프로덕션 용도로 권장되지 않는다는 점에 유의하십시오.

SailsJS 및 Bower와 함께 작업하는 경우 Fontawesome 및 Bootstrap 글꼴 문제를 해결하는 솔루션을 찾았습니다.

https://gist.github.com/robksawyer/fc274120aef9db278eectasks/config/bower.js 와 비슷한 모양 인지 확인하십시오 .
npm 모듈 grunt-remove 추가 .
만들기 remove.js파일에 tasks/config: https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
업데이트 파일 tasks/register/compileAssets: https://gist.github.com/robksawyer/fa04a34ea103bead1c61
tasks/config/copy.js파일을 https://gist.github.com/robksawyer/2aac6d0cdb73bfa8239f로 업데이트합니다 .

내 Gruntfile.js를 다음과 같이 편집했습니다.

//...
copy: {
  dist: {
    files: [//... {
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.dist %>/fonts'
    }]
  },
  app: {
    files: [{
      expand: true,
      dot: true,
      cwd: 'bower_components/font-awesome/fonts/',
      src: ['*.*'],
      dest: '<%= yeoman.app %>/fonts'
    }]
  }, //...
}
//...
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['build', 'connect:dist:keepalive']);
  }

  grunt.task.run([
    'clean:server',
    'wiredep',
    'copy:app', // Added this line
    'concurrent:server',
    'autoprefixer:server',
    'connect:livereload',
    'watch'
  ]);
});

여만 1.4.7과 앵귤러 제너레이터를 사용하고 있습니다. copy : dist 작업뿐만 아니라 copy : app을 추가하는 것이 매우 중요합니다 (위에서 제안한대로). 입력 grunt serve할 때 copy : app를 포함하지 않으면 작동하지 않습니다. copy : dist를 사용하면 고려 중입니다.grunt serve:dist

나는 똑같은 문제를 겪고 있었다. font-awesome에 대한 bower.json 파일을 살펴보고 다음을 발견했습니다.

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

"main"배열에는 "font-awesome.css"에 대한 참조가 없습니다. 아마도 저처럼 스타일링에 SASS 또는 LESS를 사용하지 않을 것입니다. 따라서 멋진 글꼴을위한 스타일이 추가되지 않습니다. 다음과 같이 json 파일을 수정했습니다.

{
  "name": "font-awesome",
  "description": "Font Awesome",
  "keywords": [],
  "homepage": "http://fontawesome.io",
  "dependencies": {},
  "devDependencies": {},
  "license": ["OFL-1.1", "MIT", "CC-BY-3.0"],
  "main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss",
    "css/font-awesome.css",
    "fonts/fontawesome-webfont.tff",
    "fonts/fontawesome-webfont.woff",
    "fonts/fontawesome-webfont.woff2"
  ],
  "ignore": [
    "*/.*",
    "*.json",
    "src",
    "*.yml",
    "Gemfile",
    "Gemfile.lock",
    "*.md"
  ]
}

나는 grunt serve를 저장하고 실행했고 이제 내 글꼴 멋진 아이콘이 나타납니다.

Hope this helps.

For those using Google App Engine, the following worked for me:

Add to Gruntfile.js:

copy: {
  build_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= build_dir %>/fonts' 
      }
    ]
  },
  compile_font_awesome: {
    files: [
      {
         expand: true,
         flatten: true,
         src: 'vendor/components-font-awesome/fonts/*',
         dest: '<%= compile_dir %>/fonts' 
      }
    ]
  }
}

I am using LESS so I imported font-awesome.less by adding this to my main.less file.

@import '../../vendor/components-font-awesome/less/font-awesome.less';

Then I added this to my app.yaml file.

handlers:
- url: /fonts
  static_dir: static/fonts

Hi the main issue is that the font files required by font-awesome css don't get copied after you run the grunt task and you may get 404 not found error the same can be verified if you open your chrome developer mode and look in the consoe or networks tab. The same issue may occur for bootstrap aswell.

Hence we need to modify the grunt task so that the all the font files get copied.

Add seperate copy task for font files .

copy: {
  dist: { .....

  },
   fonts: {
    expand: true,
    flatten: true,
    cwd: '.',
    src: ['bower_components/bootstrap/fonts/*', 'bower_components/font-awesome/fonts/*'],
    dest: '<%= yeoman.dist %>/fonts',
    filter: 'isFile'
  },
  styles: { .......
  }
}

참고URL : https://stackoverflow.com/questions/21310382/fontawesome-is-not-working-when-project-is-built-with-grunt

'Programing' 카테고리의 다른 글

버전없이 maven으로 프로젝트를 빌드하는 방법 (0)	2020.11.20
중첩 된 목록의 첫 번째 요소 선택 (0)	2020.11.20
파이썬으로 문자열에서 기호를 제거하는 방법은 무엇입니까? (0)	2020.11.20
Python에서 가장 최근의 전 영업일 (0)	2020.11.20
UITableViewCell 문제의 가운데 맞춤 텍스트 (0)	2020.11.20

현재글프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

crosscheck

프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

글꼴 멋진 폴리머 아이콘 생성기

글꼴 멋진 폴리머 아이콘

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

프로젝트를 grunt로 빌드 할 때 Fontawesome이 작동하지 않습니다.

글꼴 멋진 폴리머 아이콘 생성기

글꼴 멋진 폴리머 아이콘

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바