weixin_39743064
weixin_39743064
2020-12-09 07:14

Angular 10, ERROR in ./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!

I found problem that in Angular 10 this fonts not work properly. In Angular 9 and other older version it works. Error log

image


ERROR in ./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /Users/ziggurat/Desktop/tests/mixins.scss:17:8: Can't resolve '../../../../../fonts/roboto/Roboto-Bold.woff' in '/Users/ziggurat/Desktop/tests/AngularStopWatch-master/angular-stopwatch/node_modules/roboto-fontface/css/roboto/sass'

  15 |     -face {
  16 |         font-family: '#{$variant}-#{$type}';
> 17 |         src: url('#{$font-full-path}-#{$type}.woff2') format('woff2'),
     |        ^
  18 |              url('#{$font-full-path}-#{$type}.woff') format('woff');
  19 |     }

angular.json


{
  "$schema": "./node_modules//cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-prototype": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/public",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/static",
              "src/favicon.ico",
              "src/manifest.json",
              "src/version/version.json",
              "src/version/version-admin.json"
            ],
            "styles": [
              "node_modules//ngx-datatable/index.css",
              "node_modules//ngx-datatable/themes/material.css",
              "node_modules//ngx-datatable/assets/icons.css",

              "src/assets/styles/custom-material-theme.scss",
              "src/assets/fonts/material-icons/material-icons.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "scripts": [
              "node_modules/highcharts/highstock.js",
              "node_modules/highcharts/modules/map.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/postscribe/dist/postscribe.min.js",
              "node_modules/jspdf/dist/jspdf.min.js"
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "serviceWorker": true,
              "ngswConfigPath": "src/ngsw-config.json",
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            },
            "mock": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.mock.ts"
                }
              ]
            },
            "localhost": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.localhost.ts"
                }
              ]
            },
            "uat": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.uat.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-prototype:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-prototype:build:production"
            },
            "mock": {
              "browserTarget": "angular-prototype:build:mock"
            },
            "localhost": {
              "browserTarget": "angular-prototype:build:localhost"
            }
          }
        },
        "extract-i18n": {
          "builder": "-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-prototype:build"
          }
        },
        "test": {
          "builder": "-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "karmaConfig": "./karma.conf.js",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "scripts": [
              "node_modules/highcharts/highstock.js",
              "node_modules/highcharts/modules/map.js",
              "node_modules/moment/min/moment.min.js",
              "node_modules/postscribe/dist/postscribe.min.js"
            ],
            "styles": [
              "node_modules//ngx-datatable/assets/icons.css",
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss",
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-medium.scss",
              "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface-bold.scss",
              "src/assets/styles/custom-material-theme.scss",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss"
            ],
            "assets": [
              "src/assets",
              "src/static",
              "src/favicon.ico",
              "src/proxy.php"
            ]
          }
        },
        "lint": {
          "builder": "-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "angular-prototype-e2e": {
      "root": "",
      "sourceRoot": "",
      "projectType": "application",
      "architect": {
        "e2e": {
          "builder": "-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "./protractor.conf.js",
            "devServerTarget": "angular-prototype:serve"
          }
        },
        "lint": {
          "builder": "-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "e2e/tsconfig.e2e.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "angular-prototype",
  "schematics": {
    "/angular:component": {
      "prefix": "exa",
      "styleext": "scss"
    },
    "/angular:directive": {
      "prefix": "exa"
    }
  },
  "cli": {
    "analytics": false
  }
}

package.json


{
  "name": "angular-stopwatch",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "/animations": "~10.0.0",
    "/common": "~10.0.0",
    "/compiler": "~10.0.0",
    "/core": "~10.0.0",
    "/forms": "~10.0.0",
    "/platform-browser": "~10.0.0",
    "/platform-browser-dynamic": "~10.0.0",
    "/router": "~10.0.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3",
    "roboto-fontface": "~0.10.0"
  },
  "devDependencies": {
    "-devkit/build-angular": "~0.1000.0",
    "/cli": "~10.0.0",
    "/compiler-cli": "~10.0.0",
    "/jasmine": "~3.5.0",
    "/jasminewd2": "~2.0.3",
    "/node": "^12.11.1",
    "codelyzer": "^6.0.0-next.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "rxjs": "^6.5.5",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }
}

该提问来源于开源项目:choffmeister/roboto-fontface-bower

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

7条回答

  • weixin_39905037 weixin_39905037 4月前

    Hi,

    I solved this issue by overriding the value of $roboto-font-path, as shown below: $roboto-font-path: '~roboto-fontface/fonts'

    Hope it helps.

    点赞 评论 复制链接分享
  • weixin_39724287 weixin_39724287 4月前

    Hi ,

    Can you please provide more info. I've tried your solution and it didn't work (I've put it in styles.scss). Where do we have to override the original path, in app.scss, in styles.scss etc? And where do we have to use the

    $roboto-font-path
    variable? This is a main blocker as prod build and dev build fails because of the provided error. Note: Prod serve and dev serve do not fail (only show error at compile time as shown by the author).

    Thanks.

    点赞 评论 复制链接分享
  • weixin_39905037 weixin_39905037 4月前

    Hi ,

    I've added this to my styles.scss: /* Roboto Font */ $roboto-font-path: '~roboto-fontface/fonts'; '~roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss';

    点赞 评论 复制链接分享
  • weixin_39724287 weixin_39724287 4月前

    ,

    I've added to my

    styles.scss
    the same snippet as you've provided but no luck :(. The error is still there
    点赞 评论 复制链接分享
  • weixin_39905037 weixin_39905037 4月前

    Did you make sure that the style sheet is not included elsewhere in the project (e.g. angular.json)?

    点赞 评论 复制链接分享
  • weixin_39724287 weixin_39724287 4月前

    yep that's exactly what I was missing. Thanks a lot!!. Now the dev/prod build works. So to summarize: 1. Remove

     "input": "node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss" 
    from styles array in
    angular.json
    2. Add following lines in
    styles.scss
    :
    
    $roboto-font-path: '~roboto-fontface/fonts';
     '~roboto-fontface/css/roboto/sass/roboto-fontface-regular.scss'; (or/and any other roboto fontface scss files)
    
    点赞 评论 复制链接分享
  • weixin_39633437 weixin_39633437 4月前

    Another way to overwrite the default value of '$roboto-font-path' is the use of " '...' with (..)" - see the sass website on variables.

    Migrating from angular 8 to angular 9 I updated all the scss in my current app to the 'new' syntax using (as IMHO this is the way sass recommends by now).

    So my import of roboto now looks like:

    
     'roboto-fontface/css/roboto/sass/roboto-fontface' with (
      $roboto-font-path: '~roboto-fontface/fonts'
    );
    
    点赞 评论 复制链接分享

为你推荐