问题描述
我正在尝试使用 Angular Material 在 Angular 应用程序项目中创建具有唯一名称和颜色的自定义主题调色板,甚至可能不使用组件库。
根据 Angular Material,我首先遵循 Theming your Angular Material app 并在 my-theme.scss
文件夹目录中创建了 src
,如下所示:
@import "~@angular/material/theming";
@include mat-core();
我尝试使用来自 _theming.scss
的名称:
$my-theme-my-name1: mat-palette($mat-green,300,400,500,700);
$my-theme-my-name2: mat-palette($mat-Amber,700);
然后:
$my-theme: mat-palette(
$my-theme-my-name1,$my-theme-my-name2
);
@include angular-material-theme($my-theme);
然后我像这样在 src/my-theme.scss
中添加路径 angular.json
:
"styles": [
{
"input": "src/my-theme.scss"
},"src/styles.scss"
],
并在 <button my-theme-my-name1>My button</button>
中使用名称但按钮不会改变颜色。
styles.scss
在安装库时默认包含 @import '~@angular/material/theming';
,也许我只需要在 styles.scss
中更改某些内容,而无需创建 my-theme.scss
并使用 _theming.scss
,我不确定具体如何,但类似于:
$my-theme-my-name1: my-palette(#fff,700);
因为看起来我做错了,颜色没有改变,ng serve
会在将 src/my-theme.scss
添加到 angular.json
时抛出错误:
发生未处理的异常:ENOENT:没有这样的文件或目录, lstat '..\src\my-theme.scss' 参见“..\ng-hZt0fz\angular-errors.log” 更多详情。
[error] Error: ENOENT: no such file or directory,lstat '...\src\my-theme.scss'
at Object.realpathSync (fs.js:1728:7)
at ...\node_modules\@angular-devkit\build-angular\src\webpack\configs\styles.js:44:35
at Array.forEach (<anonymous>)
at Object.getStylesConfig (...\node_modules\@angular-devkit\build-angular\src\webpack\configs\styles.js:35:76)
at ...\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:91:23
at generateWebpackConfig (...\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:45:49)
at processticksAndRejections (internal/process/task_queues.js:93:5)
at async generatebrowserWebpackConfigFromContext (...\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:136:20)
at async Object.generateI18nbrowserWebpackConfigFromContext (...\node_modules\@angular-devkit\build-angular\src\utils\webpack-browser-config.js:77:20)
at async setup (...\node_modules\@angular-devkit\build-angular\src\dev-server\index.js:87:47)
解决方法
此 $my-theme-my-name1
是一个 sass 变量,将其作为属性直接添加到按钮不会为您的按钮设置样式。 (您不能在 HTML 或 TS 中引用 sass 变量)。
这里是您如何为自己的组件设置样式。
为您的按钮创建一个自定义选择器(id 或 class)并为其添加主题颜色。
示例
/*...necessary imports*/
$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((
color: (
primary: $candy-app-primary,accent: $candy-app-accent,warn: $candy-app-warn,)
));
@include angular-material-theme($candy-app-theme); //This will make sure to style material components
.my-custom-btn {
background-color: mat-color($candy-app-primary);
color: mat-color($candy-app-primary,default-contrast);
}
现在将类 my-custom-btn
添加到按钮 <button class="my-custom-btn">My button</button>
以上只是一个例子,建议创建自己的mixin来为自己的组件设置样式。
出现错误,这显然意味着文件 my-theme.scss 被删除、移除或重命名。