使用angular2-material时修改Materialize CSS主色调无效，该如何解决？

嘿，我完全懂你遇到的困扰——直接修改node_modules里的Materialize变量文件确实不会生效，主要有这两个核心原因，还有对应的标准解决方法：

为什么直接改node_modules文件没用？ #

• 包管理器会覆盖修改：每次执行npm install、npm update或者重新安装依赖时，node_modules目录里的文件会被重新拉取，你手动做的修改会直接丢失。
• 构建流程不监听该目录：Angular的构建工具默认不会监听node_modules的文件变化，所以就算你改了，构建系统也不会把这些修改同步到最终的输出文件里。

正确的自定义变量方法（最佳实践） #

Materialize的Sass设计就是支持通过提前定义变量来覆盖默认值，具体步骤如下：

1. 创建自定义变量文件
   在你的Angular项目的src/styles/目录下新建一个Sass文件，比如custom-materialize-vars.scss。

2. 在自定义文件里重写变量
   把你要修改的变量写在这里，注意要去掉!default（这个标记的作用是“只有变量未被定义时才使用默认值”，所以我们直接定义变量就能覆盖默认）：

// 自定义主色调示例
$primary-color: color("blue", "lighten-2");
$primary-color-light: lighten($primary-color, 15%);
$primary-color-dark: darken($primary-color, 15%);

// 其他你想修改的变量也可以在这里定义
$secondary-color: color("purple", "lighten-1");
$success-color: color("green", "darken-2");

3. 调整主样式文件的引入顺序
   打开项目的主样式文件（一般是src/styles.scss），先引入你的自定义变量文件，再引入Materialize的核心Sass文件，这样Materialize会优先使用你定义的变量：

// 先加载自定义变量
@import "./custom-materialize-vars.scss";
// 再加载Materialize的Sass
@import "~materialize-css/sass/materialize.scss";

4. 确认项目支持Sass（可选）
   如果你的项目之前是用CSS而不是Sass，需要修改angular.json里的配置，把styles数组里的.css文件改成.scss，同时确保Angular CLI已经安装了Sass依赖（一般默认已经安装）。

这样修改后，重新构建你的Angular项目，Materialize的主色调就会变成你自定义的颜色了，而且这种方法不会被包管理器覆盖，团队协作时也能同步你的配置。

内容的提问来源于stack exchange，提问作者Reza Saadati