programing

프로젝트가 grunt로 구축되면 Fontawesome이 작동하지 않습니다.

subpage 2023. 4. 4. 21:19
반응형

프로젝트가 grunt로 구축되면 Fontawesome이 작동하지 않습니다.

폰트 라이브러리 폰트를 멋있게 쓰고 있어요.이 기능은 프로젝트가 구축되지 않았거나 grunt로 확대되지 않았을 때 작동합니다.

하지만 투덜대며 프로젝트를 진행하면 효과가 없습니다.콘솔에 다음 오류가 표시됨: .../displaysome/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 폴더를 dists/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 %>'
        }]
    }
}

프로젝트에서 SAS를 사용하고 있다면 관심 있는 사람이 있다면 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";

yoman의 grunt 태스크스택은 다음과 .useminPrepare.build:css- do. ( 「 」를 참조해 주세요.https://github.com/yeoman/grunt-usemin폴더에 234243.css"입니다.따라서 글꼴 경로가 더 이상 유효하지 않습니다.문제를 할 수 두 .

  1. pont-awesom css에서 할 수 .build: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 -->

  2. 하기 ★★★★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 and를니 an an an니 an an an an를 붙입니다.overrides★★★★★★★★★★★★★★★★★★.

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

해서 써야 합니다.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 아이콘을 생성할 수 있습니다.

를 들어, I icons 를 를 i i i ( 아 아 ) ) ) as as as as as as as as as as as as as as as as as as as ascode, line-chart, github-alt이치노

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

하면 파일이 됩니다.build/myappname-icons.html그런 다음 다른 컴포넌트와 마찬가지로 이 파일을 내 컴포넌트로 Import해야 합니다.

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

이렇게 멋진 폰트 아이콘을 얻을 수 있습니다.

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

즉, 아이콘 세트를 만들 때 붙인 이름과 함께 일반 글꼴-대단한 이름 앞에 붙습니다.

폰트 아이콘

또한 미리 작성된 글꼴 놀라운 아이콘 세트를 가져올 수도 있습니다.

bower install font-awesome-polymer-icons

이렇게 하면 배포 크기에 300KB 이상이 추가되고 실제 작업에는 권장되지 않는다는 점에 유의하십시오.

돛을 사용하는 경우JS와 Bower, 저는 Fontawesome과 Bootstrap 글꼴 문제를 해결하는 솔루션을 개발했습니다.

  1. 하다tasks/config/bower.jshttps://gist.github.com/robksawyer/fc274120aef9db278eec 와 유사합니다.
  2. npm 모듈의 Grunt-Remove 추가.
  3. remove.jstasks/config: https://gist.github.com/robksawyer/2fcf036fdf02436aa90b
  4. 파일 " " "tasks/register/compileAssets: https://gist.github.com/robksawyer/fa04a34ea103bead1c61
  5. 「 」를 합니다.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'
  ]);
});

Yoan 1.4.7입니다.copy:dist 작업뿐 아니라 copy:app도 추가하는 것이 매우 중요합니다(위에서 제안했듯이).copy:하지 않을 copy: app을 합니다.grunt serve★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★copy:copy만을 : ★★★★★★★★★★★★★★★★★★★★★★★★★★★」grunt serve:dist

저도 똑같은 문제를 겪고 있었어요.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"는 참조되지 않았습니다.아마 저처럼 스타일링에 SAS나 LES를 사용하지 않을 거예요.그래서 폰트 어썸을 위한 스타일은 추가되지 않았다.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를 실행했더니 글꼴이 멋진 아이콘이 나타납니다.

이게 도움이 됐으면 좋겠다.

사용하시는 분Google App Engine다음과 같은 것이 도움이 되었습니다.

추가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' 
      }
    ]
  }
}

LESS를 사용하고 있기 때문에 Import를 했습니다.font-awesome.less이것을 제 것에 추가함으로써main.less파일.

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

그리고 나서 이걸 제 거에 넣었어요.app.yaml파일.

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

안녕하세요, 주요 문제는 grunt 태스크를 실행한 후 폰트 어썸 css에 필요한 폰트 파일이 복사되지 않고 404 not found 오류가 발생할 수 있다는 것입니다.Chrome 개발자 모드를 열고 consoe 또는 networks 탭을 확인해도 동일한 것을 확인할 수 있습니다.부트스트랩에서도 같은 문제가 발생할 수 있습니다.

따라서 모든 글꼴 파일이 복사되도록 grunt 태스크를 수정해야 합니다.

글꼴 파일용으로 별도의 복사 작업을 추가합니다.

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: { .......
  }
}

빌드 시 실행되도록 grunt.registerTask에 'copy:fonts' 태스크를 등록합니다.

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

반응형

'programing' 카테고리의 다른 글

삭제된 회선을 "git"하려면 어떻게 해야 합니까?  (0) 2023.04.09
MongoDB에서 합계를 계산하려면 어떻게 해야 합니까?  (0) 2023.04.04
AngularJS - 디렉티브의 링크 기능에서 격리된 스코프에 액세스합니다.  (0) 2023.04.04
리액트 테스트 라이브러리를 사용할 때 구성 요소가 올바른 소품으로 렌더링되는지 테스트하는 방법은 무엇입니까?  (0) 2023.04.04
Json 태그는 있지만 내보내지 않음  (0) 2023.04.04

'programing'의 다른글

  • 현재글프로젝트가 grunt로 구축되면 Fontawesome이 작동하지 않습니다.

관련글

댓글

티스토리툴바