首页 文章

角度2材料自定义主题

提问于
浏览 次
3

我正在使用Angular 2和Angular Material，我需要创建一个自定义主题，以便为组件使用自定义颜色 . 我跟着angular docs，但我无法运行它 .

到目前为止我做了什么：

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/@ my-theme.scss文件中的angular / material / theming“...” . 在Angular Docs中，他们使用“主题”作为位置，但我在某处读到，Angular Material将文件变为“_theming”，我也在我的foulder结构中找到了它 .

当我使用路径“../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结尾的任何import语句 .

我花了几个小时搜索如何将自定义主题添加到我的网站...我错过了什么吗？我对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

angular angular-material2

2 回答

  • 2

    这将有助于：

    • 将主题文件名更改为 _my-theme.scss

    • 将 styles.css 更改为 styles.scss

    • 将主题导入 styles.scss 文件，如：

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

    • 您不需要在 styles: [] 中包含您的主题文件
    回复于
  • -1

    您可能需要更改您的应用以使用sass . 在您的angular-cli文件上更改行：

    "styleExt": "css",

    至：

    "styleExt": "scss",

    然后将所有css文件重命名为scss . 把你的myse.scss放在那里 .

    重命名后也可以更改cli

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

    然后在assets文件夹中创建一个名为styles的文件夹 .

    所以它会是这样的

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

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

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

相关问题