Question

我已经将最初使用CSS创建的Angular 7项目转换为SCSS。

按照官方文档中的说明，我在 angular.json

中添加了以下内容

"schematics": {
        "@schematics/angular:component": {
        "styleext": "scss"
        }
      }

并将所有CSS转换为SCSS，还将所有样式表引用更改为SCSS。应用程序可以正常运行，直到我进行 ng测试时才遇到任何问题。运行业力时出现以下错误

08 06 2019 13:01:18.524:INFO [karma-server]: Karma v4.0.1 server started at http://0.0.0.0:9876/
08 06 2019 13:01:18.525:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
08 06 2019 13:01:18.551:INFO [launcher]: Starting browser ChromeERROR in multi ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css ./src/styles.css
Module not found: Error: Can't resolve 'E:\Workspace\angular\myproject\src\styles.css' in 'E:\Workspace\angular\myproject'
resolve 'E:\Workspace\angular\myproject\src\styles.css' in 'E:\Workspace\angular\myproject'
  using description file: E:\Workspace\angular\myproject\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: E:\Workspace\angular\myproject\package.json (relative path: ./src/styles.css)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        E:\Workspace\angular\myproject\src\styles.css doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        E:\Workspace\angular\myproject\src\styles.css.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        E:\Workspace\angular\myproject\src\styles.css.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        E:\Workspace\angular\myproject\src\styles.css.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        E:\Workspace\angular\myproject\src\styles.css.js doesn't exist
      as directory
        E:\Workspace\angular\myproject\src\styles.css doesn't exist
[E:\Workspace\angular\myproject\src\styles.css]
[E:\Workspace\angular\myproject\src\styles.css.ts]
[E:\Workspace\angular\myproject\src\styles.css.tsx]
[E:\Workspace\angular\myproject\src\styles.css.mjs]
[E:\Workspace\angular\myproject\src\styles.css.js]
 @ multi ./node_modules/@angular/material/prebuilt-themes/indigo-pink.css ./src/styles.css styles[1]

即使我不完全理解此错误消息。看来Karma仍在某种程度上看到旧的CSS引用。

任何建议都将大有帮助！谢谢！

Answer 1

在您的angular.json

更改

"styles": [
      "src/styles.css"
],

到

"styles": [
      "src/styles.scss"
],

在从CSS转换为SCSS的项目上运行Karma时出错

1 个答案: