Angular 2材料自定义主题

Question

我将使用Angular 2和Angular Material，并需要创建一个自定义主题，以便为组件使用自定义颜色。我遵循了angular文档，但我无法运行它。

到目前为止，我做了以下几件事：

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"
]

我的本地网站提示我“编译失败”，模块未找到：'../node_modules/@angular/material/_theming'。

在my-theme.scss文件中，我尝试了几种导入路径的变化（“~@angular/material/_theming”，“../node_modules/@angular/material/_theming”，“~@angular/material/theming”，“../node_modules/@angular/material/theming”...）。在Angular文档中，使用“theming”作为位置，但我在某个地方读到，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文档没有提及，但我读到一些评论，人们说这解决了他们使用自定义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

- Polarfox

---

我曾经遇到过同样的问题。在@Faisal的答案基础上，我将style.css更改为style.scss，并在.angular-cli.json中进行了相同的更改，这样就可以解决问题了。您不需要在.angular-cli.json中包含主题scss文件。请注意，我不需要在主题scss文件名的开头添加下划线。 - camden_kid

Answer 1

这将有所帮助：

1. 将您的主题文件名更改为 _my-theme.scss
2. 将您的 styles.css 更改为 styles.scss

3. 在 styles.scss 文件中导入您的主题，如下所示：

   @import './path/to/your/theme/my-theme'; // 这里不需要使用下划线和文件扩展名

4. 您不需要在 styles: [] 中包含您的主题文件

- FAISAL

---

谢谢，您的回答和这个帮了我很多。为了解决问题，我使用CLI命令ng new my-project --style=scss创建了一个新的Angular项目（当然我还需要使用npm install和所有设置Angular 2 Material的命令）。然后我添加了_my-theme.scss文件（参见SASS Partials）并在styles.scss中添加了@import"my-theme"（两个文件都在同一个文件夹中）。 - Polarfox

很高兴能帮到你！干杯(Y) - FAISAL

设置新项目后，我的angular-cli.json文件定义了"styles": ["styles.scss"]和"defaults": {"styleExt": "scss", "component": {} }。手动更改这两个变量在旧项目中没有起作用，因此我决定创建一个完全支持scss的新项目，并将我的组件和其他内容复制到新项目中。 - Polarfox

请记住，当您的组件样式定义在scss文件中时，您只需要将“styleExt”更改为“scss”。这也可以手动完成，我在我的一个项目中也是这样做的。 - FAISAL

我刚刚花了几个小时在同一个问题上。我尝试手动更新.css文件为.scss，但没有成功。使用--style=scss标志从头开始重新创建整个项目解决了问题。 - clk

Answer 2

你可能需要修改应用程序以使用sass。在你的angular-cli文件中更改以下行：

"styleExt": "css",

到：

"styleExt": "scss",

然后将所有的CSS文件重命名为SCSS。将您的my themes.scss放在那里。

在您重命名后也要更改CLI。

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

然后在资产文件夹中创建一个名为styles的文件夹。

就像这样

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

然后，在style.scss文件中像这样导入：

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

- Eduardo Vargas

---

谢谢你的回答。不幸的是，它对我没有用，但也许我误解了什么。 - Polarfox

我将 "styleExt": "css" 更改为 "scss"，从 angular-cli 文件的 "styles" 中删除了 "my-theme.scss" 的引用，调整了文件夹结构和导入语句。你说的 "把你的 theme.scss 放在那里" 是什么意思？我应该把 theme.scss 文件放在哪里？ - Polarfox

构建失败了: "ERROR in ./src/app/app.component.scss Module bild failed: Error: ENOENT: no such file or directory, scandir 'C:\angularworkspace\kundenportal\node_module\node-sass\vendor'" 然后是堆栈跟踪，最后是 "multi webpack-dev-server/client?http:localhost:4200 ./src/main.ts'。 - Polarfox

如果您正确使用Sass，只需在style.scss文件中导入您的主题和通用样式，在您的angular-cli文件中只需要有style.scss。 - Eduardo Vargas

你的样式应该像这样-> assets>styles>theme.scss - Eduardo Vargas