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

分享于2022年07月17日 angular sass 问答
【问题标题】:editor.component.scss:17:100:错误:未终止的字符串标记 - Angular + Scss(editor.component.scss:17:100: ERROR: Unterminated string token - Angular + Scss)
【发布时间】:2022-06-18 17:44:10
【问题描述】:

我在使用 scss 作为 stringUrl 的 Angular 应用程序中遇到未终止的字符串令牌错误。

@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;
                                }
                            }
                        }
                    }
                }
            }    
        }
    }
}    


【解决方案1】:

browserslist @angular-devkit/build-angular 包含,尝试运行:

npx browserslist --update-db

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

the trick of setting minify: false 也对我有用,但我宁愿拥有一个最新的浏览器列表,而不是关闭缩小)