CODEWITHSUNDEEP
angular
Node.JS
Node.JS

Reputation: 1592

angular fails to find styles.sass

I tried to change my simple Angular project to use sass instead of css and I am getting the following error:

[email protected] build /home/hesamian/WebstormProjects/contractor-finder-ui/app ng build

ERROR in multi ./src/styles.sass
Module not found: Error: Can't resolve '/home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass' in '/home/hesamian/WebstormProjects/contractor-finder-ui/app'
resolve '/home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass' in '/home/hesamian/WebstormProjects/contractor-finder-ui/app'
  using description file: /home/hesamian/WebstormProjects/contractor-finder-ui/app/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/hesamian/WebstormProjects/contractor-finder-ui/app/package.json (relative path: ./src/styles.sass)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.js doesn't exist
      as directory
        /home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass doesn't exist
[/home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass]
[/home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.ts]
[/home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.tsx]
[/home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.mjs]
[/home/hesamian/WebstormProjects/contractor-finder-ui/app/src/styles.sass.js]
 @ multi ./src/styles.sass styles[0]

My angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "contractor-finder-ui": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "sass"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/contractor-finder-ui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.sass"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "contractor-finder-ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "contractor-finder-ui:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "contractor-finder-ui:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.sass"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "contractor-finder-ui:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "contractor-finder-ui:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "contractor-finder-ui",
  "schematics": {
    "@schematics/angular:component": {
      "styleext": "sass"
    }
  }
}

And my folder structure:

./
├── angular.json
├── browserslist
├── dist
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── karma.conf.js
├── package.json
├── package-lock.json
├── src
│   ├── app
│   │   ├── app.component.html
│   │   ├── app.component.sass
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   ├── app-routing.module.ts
│   │   ├── components
│   │   │   ├── account
│   │   │   │   ├── login
│   │   │   │   │   ├── login.component.html
│   │   │   │   │   ├── login.component.sass
│   │   │   │   │   └── login.component.ts
│   │   │   │   ├── logout
│   │   │   │   │   ├── logout.component.html
│   │   │   │   │   ├── logout.component.sass
│   │   │   │   │   └── logout.component.ts
│   │   │   │   └── register
│   │   │   │       ├── register.component.html
│   │   │   │       ├── register.component.sass
│   │   │   │       └── register.component.ts
│   │   │   ├── board
│   │   │   │   ├── board.component.html
│   │   │   │   ├── board.component.sass
│   │   │   │   └── board.component.ts
│   │   │   ├── common
│   │   │   │   ├── http-intercept
│   │   │   │   │   ├── http-intercept.component.html
│   │   │   │   │   ├── http-intercept.component.sass
│   │   │   │   │   └── http-intercept.component.ts
│   │   │   │   └── wrapper
│   │   │   │       ├── common.component.html
│   │   │   │       ├── common.component.sass
│   │   │   │       └── common.component.ts
│   │   │   └── contractor
│   │   │       ├── index
│   │   │       │   ├── contractor.index.component.html
│   │   │       │   ├── contractor.index.component.sass
│   │   │       │   └── contractor.index.component.ts
│   │   │       ├── save
│   │   │       │   ├── contractor.save.component.html
│   │   │       │   ├── contractor.save.component.sass
│   │   │       │   └── contractor.save.component.ts
│   │   │       └── update
│   │   │           ├── contractor.update.component.html
│   │   │           ├── contractor.update.component.sass
│   │   │           └── contractor.update.component.ts
│   │   ├── constants
│   │   │   └── api.ts
│   │   ├── intercepters
│   │   │   └── jwt.intercepter.ts
│   │   ├── models
│   │   │   ├── Account.ts
│   │   │   ├── authentication.service
│   │   │   │   ├── login
│   │   │   │   │   ├── LoginRequest.ts
│   │   │   │   │   └── LoginResponse.ts
│   │   │   │   └── register
│   │   │   │       ├── RegisterRequest.ts
│   │   │   │       └── RegisterResponse.ts
│   │   │   └── Contractor.ts
│   │   ├── modules
│   │   │   ├── account.module.ts
│   │   │   ├── board.module.ts
│   │   │   ├── common.module.ts
│   │   │   └── contractor.module.ts
│   │   ├── RouterConfig.ts
│   │   ├── services
│   │   │   ├── abstracts
│   │   │   │   └── crud.service.ts
│   │   │   ├── authentication.service.ts
│   │   │   └── contractor.service.ts
│   │   └── utilities
│   │       ├── custom.error.handler.utility.ts
│   │       ├── custom.reuse.strategy.utility.ts
│   │       └── route.utility.ts
│   ├── assets
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   └── test.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
├── tslint.json
└── yarn.lock

Upvotes: 1

Views: 93

Answers (1)

Wandrille
Wandrille

Reputation: 6821

There is no file styles.sass in your project, in your folder src.

Upvotes: 1

Related Questions