相关疑难解决方法(0)

从 Angular 11 更新到 12 后，ng serve现在抛出错误：

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/_colors.scss:1:4: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/custom-bootstrap.scss:1:1: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/global.scss:296:12: Unknown word
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser

Error: /Users/btaylor/work/angular-apps/mdsl-authoring/assets/scss/mdsl-composer/mdsl-composer-variables.scss:103:1: Unknown word
You tried to parse SCSS with the …

运行 ngserve 时我得到以下结果：

*./src/main.ts - 错误：模块构建失败（来自./node_modules/@ngtools/webpack/src/ivy/index.js）../.component.scss:17:100：错误：未终止的字符串标记

*./src/polyfills.ts` - 错误：模块构建失败（来自./node_modules/@ngtools/webpack/src/ivy/index.js）../.component.scss:17:100：错误：未终止的字符串代币

这个有棱角的版本

    角度 CLI：14.0.6
    节点：16.16.0
    包管理器：NPM 8.14.0
    操作系统：win32 x64
    
    角度：14.0.6
    
    套餐版本
    -------------------------------------------------- --------
    @Angular-devkit/建筑师0.1400.6
    @Angular-devkit/build-Angular 14.0.6
    @Angular-devkit/核心 14.0.6
    @angular-devkit/schematics 14.0.6
    `@角度/cdk 14.0.5`
    @角度/材料14.0.5
    @nguniversal/express-engine 7.1.1
    @schematics/角度14.0.6
    `rxjs 6.6.7`
    打字稿 4.6.4

/.组件.scss

input[type=text]:disabled {
  color: black;
}

.search-row {
  .form-group > label {
    font-size: 1.1em !important;
      color: black;
  }
}

.mat-table {
  th.mat-header-cell {
    font-size: 1.1em !important;
      color: black;
  }
}//<< here line 17.


#block {
  margin: 0% 10%;
}
...

感谢您的帮助

我正在按照此操作通过 Angular 8 中的 stylePreprocessorOptions 添加可导入的 scss 文件，但我不断收到未找到它的错误。任何输入都值得赞赏，这个巧妙的技巧非常有用！

下面是我的 angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "thebearcottages-app": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss",
          "skipTests": true
        },
        "@schematics/angular:class": {
          "skipTests": true
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:module": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": …

将我的项目升级到 Angular 13 后，当我运行ng serve. 我还包括下面的package.json和webpack.config.js文件。

我已经尝试删除该node_modules文件夹并运行npm install但无济于事。

包.JSON

{
  "name": "acentus",
  "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": {
    "@angular/animations": "^13.2.4",
    "@angular/cdk": "^13.2.4",
    "@angular/common": "^13.2.4",
    "@angular/compiler": "^13.2.4",
    "@angular/core": "^13.2.4",
    "@angular/fire": "^7.2.1",
    "@angular/forms": "^13.2.4",
    "@angular/material": "^13.2.4",
    "@angular/platform-browser": "^13.2.4",
    "@angular/platform-browser-dynamic": "^13.2.4",
    "@angular/router": "^13.2.4",
    "@iconify/icons-ic": "^1.0.11",
    "@ngneat/tailwind": "^7.0.3",
    "@ngrx-utils/store": "^0.13.1",
    "@ngrx/effects": "^11.0.1",
    "@ngrx/router-store": "^11.0.1", …