angular cli 6 无法在 style.scss 中加载外部 scss 文件？ node_modules/raw-loader/node_modules/postcss-loader/lib?

Posted 2023-03-06

【中文标题】angular cli 6 无法在 style.scss 中加载外部 scss 文件？ node_modules/raw-loader/node_modules/postcss-loader/lib??embedded

【英文标题】：angular cli 6 Failed to load external scss files in the style.scss ? node_modules/raw-loader/node_modules/postcss-loader/lib??embedded

【发布时间】：2018-12-14 23:52:02

【问题描述】：

./src/styles.scss 中的错误 (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles. css) （发出的值而不是错误的实例） CssSyntaxError： /Users/src/assets/sass/modules/partials/_landing.scss:5:16: 无法解析“../assets/images/header-bg.png” '/用户/src'

3 | 4 | .inner-page-banner

5 |背景： url(../assets/images/header-bg.png) 无重复中心； | ^ 6 |背景尺寸：封面； 7 | /* 背景附件：固定； */

ℹ｢wdm｣：编译失败。

Angular.json

"build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/Yosso-buyer",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          ,



"@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "~6.0.8",
    "@angular/compiler-cli": "^6.0.3",
    "@angular/language-service": "^6.0.3",
    "@types/jasmine": "~2.8.6",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.4",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"



"@angular/animations": "^6.0.3",
    "@angular/common": "^6.0.3",
    "@angular/compiler": "^6.0.3",
    "@angular/core": "^6.0.3",
    "@angular/forms": "^6.0.3",
    "@angular/http": "^6.0.3",
    "@angular/platform-browser": "^6.0.3",
    "@angular/platform-browser-dynamic": "^6.0.3",
    "@angular/router": "^6.0.3",
    "bootstrap": "^4.1.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "popper.js": "^1.14.3",
    "rxjs": "^6.0.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"

enter image description here

【问题讨论】：

看看：***.com/q/42351593/7124761

这里，我没有 webpack.config.json 文件。我使用 Angular cli 版本 6 生成了应用程序。（node-sass 加载器问题）

【参考方案1】：

从错误看来路径是错误的：assests

'../assests/images/header-bg.png' in '/Users/src'

但在你拥有的资产下

"src/assets"