Question

我一直在使用这种重要的角度模板作为管理项目的基础-经过几个月的开发-当我尝试ng服务或ng构建时，我的系统开始出现错误-屏幕抛出了许多错误（基本上是相同的错误每个调用scss模板的模块或模板-几乎都是它们。

这是错误的开始（和结束），希望它会引起别人的注意。

ERROR in ./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.scss)
Module build failed:
@import "src/@fuse/scss/fuse";
...

^
  File to import not found or unreadable: src/@fuse/scss/fuse.
  in C:\www\app\src\@fuse\components\navigation\navigation.component.scss (

line 1, column 1)
ERROR in ./src/app/main/admin/my-profile/my-profile.component.scss
Module build failed:
undefined
^
  File to import not found or unreadable: src/@fuse/scss/fuse.
  in C:\www\app\src\app\main\admin\my-profile\my-profile.component.scss (line 2, column 1)
i ｢wdm｣: Failed to compile.

我尝试过的事情：

1) moving my project up the dir structure to reduce path length 
2) blowing out package lock and node_modules and reinstalling -  
3) deleting node-sass from npm-cache 
4) npm rebuild node-sass 
5) npm audit fix 
6) doing a regex in win 10 home to LongPathsEnabled=1

7) TOTALLY new install of win 10 home, on brand new SSD - fresh install of nodeJS 10, Angular CLI, and ONLY this RAW template no modifications 
(this was a planned upgrade, not a drastic hail-mary, but I was hopeful that it might help this issue). No luck  - same issue.

其他开发人员没有此问题-这意味着他们可以提交回购协议并可以工作，而当我拉出（甚至尝试从供应商直接安装）时，我无法编译...这意味着我无法工作

任何帮助或想法都得到高度认可

环境：

Win 10 home 
Angular CLI: 6.0.8
Node: 10.14.1
OS: win32 x64
Angular: 6.0.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.8
@angular-devkit/build-angular      0.6.8
@angular-devkit/build-optimizer    0.6.8
@angular-devkit/core               0.6.8
@angular-devkit/schematics         0.6.8
@angular/cdk                       6.3.3
@angular/cli                       6.0.8
@angular/flex-layout               6.0.0-beta.16
@angular/material                  6.3.3
@angular/material-moment-adapter   6.3.3
@ngtools/webpack                   6.0.8
@schematics/angular                0.6.8
@schematics/update                 0.6.8
rxjs                               6.2.1
typescript                         2.7.2
webpack                            4.8.3

package.json看起来像这样。

{
  "name": "fuse",
  "version": "6.2.4",
  "license": "https://themeforest.net/licenses/terms/regular",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "start-hmr": "ng serve --configuration hmr --source-map=false --hmr-warning=false",
    "start-hmr-sourcemaps": "ng serve --configuration hmr --source-map=true --hmr-warning=false",
    "build": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev",
    "build-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --dev --stats-json",
    "build-prod": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod",
    "build-prod-stats": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --prod --stats-json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle-report": "webpack-bundle-analyzer dist/stats.json"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "1.0.0-beta.3",
    "@angular/animations": "6.0.9",
    "@angular/cdk": "6.3.3",
    "@angular/common": "6.0.9",
    "@angular/compiler": "6.0.9",
    "@angular/core": "6.0.9",
    "@angular/flex-layout": "6.0.0-beta.16",
    "@angular/forms": "6.0.9",
    "@angular/http": "6.0.9",
    "@angular/material": "6.3.3",
    "@angular/material-moment-adapter": "6.3.3",
    "@angular/platform-browser": "6.0.9",
    "@angular/platform-browser-dynamic": "6.0.9",
    "@angular/router": "6.0.9",
    "@ngrx/effects": "6.0.1",
    "@ngrx/router-store": "6.0.1",
    "@ngrx/store": "6.0.1",
    "@ngrx/store-devtools": "6.0.1",
    "@ngx-translate/core": "10.0.2",
    "@swimlane/ngx-charts": "8.1.0",
    "@swimlane/ngx-datatable": "13.0.1",
    "@swimlane/ngx-dnd": "4.0.0",
    "@types/prismjs": "1.9.0",
    "angular-calendar": "0.25.2",
    "angular-in-memory-web-api": "0.6.0",
    "chart.js": "2.7.2",
    "classlist.js": "1.1.20150312",
    "core-js": "2.5.7",
    "d3": "5.5.0",
    "guid-typescript": "1.0.9",
    "hammerjs": "2.0.8",
    "lodash": "4.17.10",
    "moment": "2.22.2",
    "ng2-charts": "1.6.0",
    "ngrx-store-freeze": "0.2.4",
    "ngx-color-picker": "6.5.0",
    "ngx-cookie-service": "1.0.10",
    "perfect-scrollbar": "1.4.0",
    "prismjs": "1.15.0",
    "rxjs": "6.2.1",
    "rxjs-compat": "6.2.1",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.6.8",
    "@angular/cli": "6.0.8",
    "@angular/compiler-cli": "6.0.9",
    "@angular/language-service": "6.0.9",
    "@angularclass/hmr": "2.1.3",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/lodash": "4.14.111",
    "@types/node": "8.9.5",
    "codelyzer": "4.2.1",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "1.7.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.3.2",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "typescript": "2.7.2",
    "webpack-bundle-analyzer": "2.13.1"
  }
}

Answer 1

我认为您的操作系统的重新安装有点过头。

您会在错误中看到：

in C:\www\app\src\@fuse\components\navigation\navigation.component.scss (

由于@fuse文件夹应位于node_modules中，因此应用程序查找目录错误

如果要将样式表包括在角度构建中，请尝试将其添加到angular.json中。在配置中，您应该找到包含style.scss的行。只需在此处添加外部样式表即可：

        "styles": [
          "./node_modules/@fuse/scss/fuse.scss",
          "src/styles.scss"
        ],

然后重新启动CLI。

如果您想将其导入样式表本身，请尝试执行以下操作：

@import "~@fuse/scss/fuse"

但是对于整体样式，我建议使用第一种。

尝试提供或构建模板项目时出现webpack角度和Sass问题

1 个答案: