editor.component.scss：17：100：错误：未终止的字符串标记 - Angular + Scss

Question

我在使用 scss 作为 stringUrl 的角度应用程序中收到未终止的字符串标记错误。

@import "~bootstrap/scss/bootstrap";

.view-container, .module-row, .view, .view-inner-container {
    flex: 1;
}

.advanced-editor-wrapper {
    @extend .h-100;
    .advanced-editor-header {
        @extend .p-2, .d-flex, .align-items-center, .justify-content-between;
        border-bottom: 1px solid #333;
        h4 {
            @extend .d-inline, .m-0;
        }
        .header-button {
            @extend .mr-2, .btn;
        }
    }
    .parent-flex-container {
        @extend  .p-2, .w-100, .h-100, .d-flex, .flex-column;
        .add-view {
            @extend .btn, .h-100, .m-1, .w-100, .d-flex, .flex-column, .align-items-center, .justify-content-center; 
            flex-basis: 50px;
            background-color: transparent !important;
            border: 2px dashed #2799A5;
            color: var(--body-color);
            transition: all 0.2s ease-in;
            border-radius: 5px;
            &:hover {
                background-color: #333 !important;
                border-color: var(--body-color);
            }
            &.flex-row {
                flex-direction: row !important;
            }
        }
        .module-row-container {
            @extend  .d-flex, .flex-column, .h-100;
            .module-row {
                @extend  .d-flex, .flex-row, .mb-2;
                .view-container {
                    @extend .w-100, .d-flex, .flex-row;
                    .view-inner-container {
                        @extend  .d-flex, .flex-row;
                        .view {
                            @extend .m-1, .h-100, .position-relative, .d-flex, .flex-column, .align-items-center, .justify-content-center;
                            border-radius: 5px;
                            .view-header {
                                @extend .d-flex, .justify-content-between, .align-items-center, .p-2, .position-absolute, .w-100;
                                left: 0; 
                                top: 0;  
                                background-color: rgba(0,0,0,0.3);
                                h5 {
                                    @extend .m-0;
                                    font-family: 'Century Gothic'; 
                                    font-weight: 400; 
                                    font-size: 1rem;
                                }
                                button {
                                    @extend .p-0;
                                }
                            }
                        }
                    }
                }
            }    
        }
    }
}    

Answer 1

\xe2\x80\xbc\xef\xb8\x8f 不要禁用优化或缩小 \xe2\x80\xbc\xef\xb8\x8f

\n

我遇到了类似的问题，它指向第 17 行的 SCSS 文件，但该文件没有那么多行数-

\n

\n

\n

我花了 4-5 个小时试图解决这个问题，但没有任何效果。人们建议禁用最小化，但从不建议这样做，因为这会降低代码的性能。

\n

我错过了 Angular 在生产构建中进行各种优化的部分，这在开发模式中是不启用的。正因为如此，构建错误可能会产生误导。答案再次提醒我/sf/answers/5156424101/。

\n

暂时禁用优化给了我正确的错误，然后我就能够修复它。

\n

\n

Answer 2

browserslist包含在 中@angular-devkit/build-angular，尝试运行：

npx browserslist --update-db

这将caniuse-lite使用浏览器更新数据库，这帮助我消除了错误...17:100: ERROR: Unterminated string token。

（设置的技巧minify: false也对我有用，但我宁愿拥有最新的浏览器列表，也不愿关闭缩小）

Answer 3

在构建 SSR 版本时遇到了同样的问题，结果发现这是我的 angular.json 中的配置错误。我有一个stylePreprocessorOptions使用 angular.json 的“build”部分中的样式路径定义的属性，但我没有用于“server”构建。

stylePreProcessorOptions我通过向该构建配置的选项添加完全相同的值来修复它，下面是我的片段angular.json：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/app/core/styles",
                "src/assets"
              ]
            ...
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/",
            ...
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/app/core/styles",
                "src/assets"
              ]
            }
          }
          ...

我希望这对您有所帮助，如果有效，请告诉我。

Answer 4

就我而言，这是这个 scss 规则，它在以前的 Angular 版本中运行良好，但在升级到 Angular 13 后因此错误而失败。

.lessonName {
    width: calc(100%-200px);
    display: inline-block;
}

看到问题了吗？我也不。问题是 css 不喜欢减号 (-) 周围没有空格。将其更改为以下内容解决了问题。对于真正有角度的开发人员来说，行号会有很大帮助！

.lessonName {
    width: calc(100% - 200px);
    display: inline-block;
}

Answer 5

从 @import 开头删除 '~'：

@import "~bootstrap/scss/bootstrap";

@import "bootstrap/scss/bootstrap";

Answer 6

有时，升级角度版本后，问题出现在导入内部！

确保它们没有“~”，而是完整的路径！

希望这会有所帮助！