Угловые 2 Материала Пользовательские Темы

Question

Я использую Angular 2 с Angular Material, и мне нужно создать собственную тему, чтобы использовать собственные цвета для компонентов. Я следовал за угловыми документами, но не могу его запустить.

Что я сделал до сих пор:

1. Я создал файл my-theme.scss:

@import "../node_module/@angular/material/_theming";

@include mat-core();

$my-theme-primary: mat-palette($mat-amber);
$my-theme-accent: mat-palette($mat-orange, A200, A100, A400);
$my-theme-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn);

@include angular-material-theme($my-theme);

2. Я импортировал созданный файл SASS в styles.css

@import "my-theme.scss"

3. Я ссылался на него в файле.angular-cli.json в разделе стилей:

"styles": [
   "styles.css",
   "my-theme.scss"
]

Мой веб-сайт под localhost сообщает мне, что модуль "сбой компиляции" не найден: "../node_modules/@angular/material/_theming".

Я попробовал несколько вариантов пути импорта ("~@angular/material/_theming", "../node_modules/@angular/material/_theming", "~@angular/material/theming", "../node_modules/@angular/material/theming"...) в файле my-theme.scss. В Angular Docs они используют "тематику" в качестве местоположения, но я где-то читал, что Angular Material сдвигает файл в "_theming", что я также обнаружил в структуре своего фулдера.

Когда я использую путь "../node_modules/@angular/material/_theming.scss", компилятор находит файл, но компиляция завершается ошибкой из-за другой ошибки:

    Module build failed: Missed semicolon (30:1)  
  28 | // Media queries  
  29 | // TODO: Find a way to respect media query ranges. 
> 30 | // TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.     
     | ^  
  31 | $mat-xsmall: 'max-width: 600px';  
  32 | $mat-small: 'max-width: 960px';

Мне это кажется странным, потому что файл _theming.scss является файлом Angular Material, а позиция ошибки - комментарием. Также я не видел ни одного оператора импорта, заканчивающегося.scss, в других рабочих реализациях в Интернете.

Я часами искал, как добавить пользовательские темы на мой сайт... Я что-то пропустил? Я довольно новичок в Angular 2 и SASS.

PS: я уже немного запутался, стоит ли мне импортировать my-theme.scss в styles.css или нет. В Angular Docs об этом не сказано ни слова, но я прочитал некоторые комментарии, в которых люди утверждают, что это исправило их проблемы с пользовательскими темами Angular Material.

Структура проекта:

my-project
 |--node_modules
 | |--@angular
 |   |--material
 |     |--prebuild-themes
 |     |--_theming.scss
 |--src
 | |--app
 | | |--my-component.css | html | ts
 | | |--app.module.ts
 | |--assets
 | |--index.html
 | |--main.ts
 | |--my-theme.scss
 | |--styles.css
 |--.angular-cli.json

Файл package.json:

  "dependencies": {
    "@angular/animations": "^4.3.1",
    "@angular/cdk": "^2.0.0-beta.8",
    "@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.8",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.2.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }

Windows 7, 64-битный Firefox 52.2.1 Visual Studio Code 1.14.1

Answer 1

Это поможет:

1. Измените имя файла вашей темы на _my-theme.scss
2. Измени свой styles.css в styles.scss

3. Импортируйте свою тему в styles.scss файл как:

   @import './path/to/your/theme/my-theme'; // Здесь вам не нужно подчеркивание и расширение файла

4. Вам не нужно включать ваш файл темы в styles: []

Answer 2

Вам, вероятно, нужно изменить свое приложение, чтобы использовать sass. В вашем файле angular-cli измените строку:

"styleExt": "css",

Для того, чтобы:

"styleExt": "scss",

Затем переименуйте все ваши css файлы в scss. положи туда свой myse.scss.

Также меняйте на кли после переименования

"styles": [
   "styles.scss",
   remove this line =>"my-theme.scss"
]

Затем в папке активов создайте папку с именем styles.

так было бы так

|--assets
   |--styles
      |--_my-theme.scss

и затем в файле style.scss импортируйте его так:

@import "~assets/styles/_my-theme.scss";