Components: File to import not found or unreadable:

Created on 11 Apr 2017 · 11Comments · Source: angular/components

I'm trying to use a custom theme but I keep getting the error:

{
  "status": 1,
  "file": "/home/adam/Projects/test-material/src/unicorn.scss",
  "line": 1,
  "column": 1,
  "message": "File to import not found or unreadable: ~@angular/material/theming.\nParent style sheet: /home/adam/Projects/test-material/src/unicorn.scss",
  "formatted": "Error: File to import not found or unreadable: ~@angular/material/theming.\n       Parent style sheet: /home/adam/Projects/test-material/src/unicorn.scss\n        on line 1 of src/unicorn.scss\n>> @import '~@angular/material/theming';\n   ^\n"
}

I've installed a brandy new Angular just to test it, and I keep getting the same error.
I tried:

$ ng new test-material
$ cd test-material/
$ npm install --save @angular/material

Then I created a file named src/unicorn.scss and pasted the example custom theme from https://material.angular.io/guide/theming and tried to compile it using:

$ node-sass src/unicorn.scss dist/unicorn.css

I got the previously mentioned error.
The content of unicorn.scss is:

@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

I'm using Angular 4 and Material 2.0.0-beta.3
This is my package.json:

{
  "name": "test-material",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

Source

adamfoerster

Most helpful comment

The issue is there due to new sass-loader https://github.com/webpack-contrib/sass-loader/pull/447#issuecomment-300263537,
Now do @import "~@angular/material/_theming.scss";

UPDATE: potentially it was a bug https://github.com/angular/material2/issues/4038#issuecomment-300470149

kuncevic on 10 May 2017

👍15 🎉3

All 11 comments

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are Stack Overflow, gitter, mailing list, etc.

fxck on 11 Apr 2017

If you're using the angular CLI you don't need to use node-sass directly; the CLI supports sass out of the box. See https://github.com/angular/material.angular.io/ for an example.

jelbourn on 12 Apr 2017

👍1

I'm getting the same bug. Fixed it by using:

@import '~@angular/material/core/theming/all-theme';

I think the issue is that the documentation is for the new version, and we are using a previous build.

kmturley on 13 Apr 2017

👍4

The issue is there due to new sass-loader https://github.com/webpack-contrib/sass-loader/pull/447#issuecomment-300263537,
Now do @import "~@angular/material/_theming.scss";

UPDATE: potentially it was a bug https://github.com/angular/material2/issues/4038#issuecomment-300470149

kuncevic on 10 May 2017

👍15 🎉3

Thanks kuncevic your suggestion works for me.

ankurkumar222 on 10 May 2017

Latest update here https://github.com/angular/material2/issues/4449#issuecomment-300414528

We're not forced to add .scss extension: it's a bug in version 6.0.4 of sass-loader.

So sounds like it was a bug in version 6.0.4 sass-loader so we might need to take out .scss in the next version (6.0.5) .

kuncevic on 10 May 2017

So, just to update things, in v5.1 we should use

// Import theming functions
@import '~@angular/material/theming';

instead of @kuncevic solution.

odahcam on 1 Feb 2018

👍1

I'm getting this error, after changing from Angular 5.1 to Angular 6.0.5. I have multiple libraries like so:

lib-1 (library 1)
app for lib-1 (demo)
lib-2 which depends on lib-1
app for library 2 (demo)
client (main app) that depends on lib-1 and lib-2

library 2's demo fails when running ng serve lib-2-demo. The following error occurs.

ERROR in ./src/styles.scss (../node_modules/raw-loader!...node_modules/postcss-loader/lib??embedded!.../node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed:
@import "~@angular/material/theming";
^
      File to import not found or unreadable: ~@angular/material/theming.
      in ...\dist\lib-1\styles\variables.scss (line 1, column 1)

This is occuring, because in lib-2/demo/src/styles.scss, I import:

@import "~lib-1/styles/material-overrides";
@import "~lib-1/styles/kendo-overrides";

Environment:
Tried it on @angular/material = 6.0.5, but have since updated @angular/material and @angular/cdk to 6.3.1

@angular-devkit/* = 0.6.8
@angular/cli = 6.0.8
@angular/* = 6.0.5
@ngtools/webpack = 6.0.8
@schematics/* = 0.6.8
ng-packagr = 3.0.0
rxjs = 6.0.0
typescript = 2.7.2
webpack = 4.8.3

NOTE: Prior to running ng serve lib-2-demo, I run:

ng build lib-1
ng build lib-2

Both pass without any errors. Here is my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "",
  "projects": {
    "lib-1": {
      "root": "./lib-1",
      "sourceRoot": "./lib-1/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "./lib-1/src/tsconfig.lib.json",
            "project": "./lib-1/ng-package.json"
          },
          "configurations": {
            "production": {
              "project": "./lib-1/ng-package.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "./lib-1/src/test.ts",
            "tsConfig": "./lib-1/src/tsconfig.spec.json",
            "karmaConfig": "./lib-1/karma.conf.js",
            "styles": [
              "./lib-1/demo-app/src/styles.scss",
              "./lib-1/node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
            ],
            "scripts": [
              "./dom-events-level-3-polyfill.shim.js",
              "./lib-1/node_modules/quill/dist/quill.min.js",
              "./lib-1/node_modules/quill-image-resize-module/image-resize.min.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "./lib-1/src/tsconfig.lib.json",
              "./lib-1/src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "lib-1-demo": {
      "root": "./lib-1/demo-app/",
      "sourceRoot": "./lib-1/demo-app/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demos/lib-1",
            "index": "./lib-1/demo-app/src/index.html",
            "main": "./lib-1/demo-app/src/main.ts",
            "polyfills": "./lib-1/demo-app/src/polyfills.ts",
            "tsConfig": "./lib-1/demo-app/tsconfig.app.json",
            "assets": [
              "./lib-1/demo-app/src/favicon.ico"
            ],
            "styles": [
              "./lib-1/demo-app/src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "./lib-1/src/styles",
                "./lib-1/node_modules"
              ]
            },
            "scripts": [
              "./lib-1/node_modules/quill/dist/quill.min.js",
              "./lib-1/node_modules/quill-image-resize-module/image-resize.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "./lib-1/demo-app/src/environments/environment.ts",
                  "with": "./lib-1/demo-app/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "lib-1-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "lib-1-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "lib-1-demo:build"
          }
        }
      }
    },
    "lib-1-e2e": { /** Not Important */},
    "lib-2": {
      "root": "./lib-2",
      "sourceRoot": "./lib-2/src",
      "projectType": "library",
      "prefix": "lib",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-ng-packagr:build",
          "options": {
            "tsConfig": "./lib-2/src/tsconfig.lib.json",
            "project": "./lib-2/ng-package.json"
          },
          "configurations": {
            "production": {
              "project": "./lib-2/ng-package.prod.json"
            }
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "./lib-2/src/test.ts",
            "tsConfig": "./lib-2/src/tsconfig.spec.json",
            "karmaConfig": "./lib-2/karma.conf.js",
            "styles": [
              "./lib-2/demo/src/styles.scss"
            ],
            "scripts": [
              "./dom-events-level-3-polyfill.shim.js",
              "./lib-2/node_modules/quill/dist/quill.min.js",
              "./lib-2/node_modules/quill-image-resize-module/image-resize.min.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "./lib-2/src/tsconfig.lib.json",
              "./lib-2/src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "lib-2-demo": {
      "root": "./lib-2/demo/",
      "sourceRoot": "./lib-2/demo/src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demos/lib-2",
            "index": "./lib-2/demo/src/index.html",
            "main": "./lib-2/demo/src/main.ts",
            "polyfills": "./lib-2/demo/src/polyfills.ts",
            "tsConfig": "./lib-2/demo/tsconfig.app.json",
            "assets": [
              "./lib-2/demo/src/favicon.ico"
            ],
            "styles": [
              "./lib-2/demo/src/styles.scss",
              "./lib-2/node_modules/@angular/material/_theming.scss"
            ],
            "scripts": [
              "./lib-2/node_modules/quill/dist/quill.min.js",
              "./lib-2/node_modules/quill-image-resize-module/image-resize.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "./lib-2/demo/src/environments/environment.ts",
                  "with": "./lib-2/demo/src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "lib-2-demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "lib-2-demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "lib-2-demo:build"
          }
        }
      }
    },
    "lib-2-e2e": { /** Not Important */ },
    "client": { /** Not Important */ }
  },
  "cli": {
    "packageManager": "yarn"
  },
  "defaultProject": "client",
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "lib",
      "styleext": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "lib"
    }
  }
}

Any reason why I'm getting this error? Also, I was getting this error in lib-1-demo when I ran ng serve lib-1-demo, but I decided in my scss to change from @import lib-1/styles/styles.scss to ../../../lib-1/styles.scss, which seemed to resolve the issue. Obviously, it didn't resolve the issue, since its now showing up. I need this to work since others use this library. I could temporarily fix it by having a manual import, but I will need to resolve this eventually, so I might as well fix it in lib-1.

Also, I have tried doing @import "~@angular/material/_theming"; and @import "~@angular/material/_theming.scss";, but nothing

danielmhair on 28 Jun 2018

@danielmhair have u managed to fix your issue?

Rassl on 7 Sep 2018

Yes, it ended up being the fact that I was importing that theming file in a an angular library and when I imported that file in the main app, it errored out. After making a theme file like @angular/material does theming, via the suggestions on material.angular.io. this allowed me to only import the @angular/material in the main app, this fixed it.

danielmhair on 7 Sep 2018

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}