首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >'CssSyntaxError‘-编译失败

'CssSyntaxError‘-编译失败
EN

Stack Overflow用户
提问于 2018-05-31 17:49:33
回答 1查看 21K关注 0票数 11

描述

我们目前正在创建一个新的angular 5 ui-library,但是当我尝试添加fonts.scss中包含的字体时,我收到了一个错误。

我已经添加了package.json文件的信息,如果需要任何进一步的细节调试,请让我知道。

fonts.scss

代码语言:javascript
复制
@font-face {
 font-family: 'bree-thin';
 src: url('./fonts/bree-thin/bree-thin.eot');
 src: url('./fonts/bree-thin/bree-thin.woff2') format('woff2'),
 url('./fonts/bree-thin/bree-thin.woff') format('woff')
}
@font-face {
 font-family: 'Noto';
 src: url('./fonts/NotoSans-Regular.ttf');
 font-weight: normal;
 font-style: normal;}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

错误消息

代码语言:javascript
复制
Failed to compile.

./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
(Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:38:13: Can't resolve './fonts/bree-thin/bree-thin.eot' in 'C:\angular-library\dist'

终端-完全错误消息

代码语言:javascript
复制
 WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) postcss-import: C:\angular-library\dist\ui-lib.css:11:1: @import must precede all other statements (besides @charset)
[0]
[0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:38:3: Can't read file 'C:\angular-library\dist\fonts\bree-thin\bree-thin.eot', ignoring
[0]
[0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:39:3: Can't read file 'C:\angular-library\dist\fonts\bree-thin\bree-thin.woff', ignoring
[0]
[0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:39:3: Can't read file 'C:\angular-library\dist\fonts\bree-thin\bree-thin.woff2', ignoring
[0]
[0] WARNING in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) postcss-url: C:\angular-library\dist\ui-lib.css:43:3: Can't read file 'C:\angular-library\dist\fonts\NotoSans-Regular.ttf', ignoring
[0]
[0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:38:13: Can't resolve './fonts/bree-thin/bree-thin.eot' in 'C:\angular-library\dist'
[0]
[0]   36 | @font-face {
[0]   37 |   font-family: 'bree-thin';
[0] > 38 |   src: url("./fonts/bree-thin/bree-thin.eot");
[0]      |             ^
[0]   39 |   src: url("./fonts/bree-thin/bree-thin.woff2") format("woff2"), url("./fonts/bree-thin/bree-thin.woff") format("woff"); }
[0]   40 |
[0]
[0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:39:13: Can't resolve './fonts/bree-thin/bree-thin.woff' in 'C:\angular-library\dist'
[0]
[0]   37 |   font-family: 'bree-thin';
[0]   38 |   src: url("./fonts/bree-thin/bree-thin.eot");
[0] > 39 |   src: url("./fonts/bree-thin/bree-thin.woff2") format("woff2"), url("./fonts/bree-thin/bree-thin.woff") format("woff"); }
[0]      |             ^
[0]   40 |
[0]   41 | @font-face {
[0]
[0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:39:13: Can't resolve './fonts/bree-thin/bree-thin.woff2' in 'C:\angular-library\dist'
[0]
[0]   37 |   font-family: 'bree-thin';
[0]   38 |   src: url("./fonts/bree-thin/bree-thin.eot");
[0] > 39 |   src: url("./fonts/bree-thin/bree-thin.woff2") format("woff2"), url("./fonts/bree-thin/bree-thin.woff") format("woff"); }
[0]      |             ^
[0]   40 |
[0]   41 | @font-face {
[0]
[0] ERROR in ./dist/ui-lib.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./dist/ui-lib.css)
[0] (Emitted value instead of an instance of Error) CssSyntaxError: C:\angular-library\dist\ui-lib.css:43:13: Can't resolve './fonts/NotoSans-Regular.ttf' in 'C:\angular-library\dist'
[0]
[0]   41 | @font-face {
[0]   42 |   font-family: 'Noto';
[0] > 43 |   src: url("./fonts/NotoSans-Regular.ttf");
[0]      |             ^
[0]   44 |   font-weight: normal;
[0]   45 |   font-style: normal; }
[0]
[0] i 「wdm」: Failed to compile.

package.json

代码语言:javascript
复制
{
  "name": "angular-library-demo",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "npm run build && npm run watch",
    "build": "npm run clean && npm run copyAssets && npm run bundle && npm run copyDemoFiles",
    "start:yarn": "yarn build && yarn watch",
    "build:yarn": "yarn clean && yarn copyAssets && yarn bundle",
    "test": "jest --silent",
    "test:watch": "jest --silent --watch",
    "lint": "ng lint",
    "protractor": "protractor protractor.conf.js",
    "bundle": "rollup -c",
    "watch": "concurrently \"ng serve --open\" \"rollup -c -w\"",
    "clean": "rimraf dist",
    "copyAssets": "copyfiles -u 2 src/library/package.json dist",
    "copyDemoFiles": "ng build && copyfiles demo/* dist && copyfiles Web.config dist/demo",
    "bump:prerelease": "cd src/library && standard-version --prerelease --skip.changelog=true --skip.tag=true --message \"***NO_CI***\"",
    "bump:release": "cd src/library && standard-version --release --message \"***NO_CI***\""
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.6",
    "@angular/common": "^5.2.6",
    "@angular/compiler": "^5.2.6",
    "@angular/core": "^5.2.6",
    "@angular/forms": "^5.2.6",
    "@angular/http": "^5.2.6",
    "@angular/platform-browser": "^5.2.6",
    "@angular/platform-browser-dynamic": "^5.2.6",
    "@angular/router": "^5.2.6",
    "core-js": "^2.4.1",
    "enhanced-resolve": "^3.3.0",
    "rxjs": "5.5.8",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.6.0",
    "@angular/cli": "^6.0.0",
    "@angular/compiler-cli": "^5.2.6",
    "@angular/language-service": "^5.2.6",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/jest": "^22.2.2",
    "@types/node": "~6.0.60",
    "autoprefixer": "^8.2.0",
    "codelyzer": "~3.2.0",
    "concurrently": "^3.5.1",
    "copyfiles": "^2.0.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "jest": "^22.4.3",
    "jest-preset-angular": "^5.2.1",
    "karma": "~1.6.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "live-server": "^1.2.0",
    "postcss": "^6.0.21",
    "protractor": "~5.1.2",
    "rimraf": "^2.6.2",
    "rollup": "^0.57.1",
    "rollup-plugin-alias": "^1.4.0",
    "rollup-plugin-angular": "^0.5.3",
    "rollup-plugin-commonjs": "^9.1.0",
    "rollup-plugin-node-resolve": "^3.3.0",
    "rollup-plugin-sass": "^0.6.0",
    "rollup-plugin-tslint": "^0.1.34",
    "rollup-plugin-typescript2": "^0.12.0",
    "rollup-watch": "^4.3.1",
    "standard-version": "^4.3.0",
    "testcafe": "^0.19.0",
    "testcafe-angular-selectors": "^0.3.0",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "^2.6.2",
    "webpack": "^4.8.1"
  },
  "jest": {
    "preset": "jest-preset-angular",
    "setupTestFrameworkScriptFile": "<rootDir>/src/jest/setupJest.ts",
    "roots": [
      "<rootDir>/src/library"
    ],
    "moduleNameMapper": {
      "\\.scss$": "<rootDir>/src/jest/SCSSStub.js"
    }
  }
}

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-05-31 18:05:33

把你所有的字体文件放到assets文件夹中,并尝试从那里加载-

代码语言:javascript
复制
@font-face {
 font-family: 'bree-thin';
 src: url('/assets/fonts/bree-thin/bree-thin.eot');
 src: url('/assets/fonts/bree-thin/bree-thin.woff2') format('woff2'),
 url('/assets/fonts/bree-thin/bree-thin.woff') format('woff')
}
@font-face {
 font-family: 'Noto';
 src: url('/assets/fonts/NotoSans-Regular.ttf');
 font-weight: normal;
 font-style: normal;}
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);
票数 19
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50621411

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档