Question

我创建了nodejs项目。这是 package.json

{
  "name": "materializecssdemo",
  "version": "1.0.0",
  "description": "Use of material design components",
  "main": "index.js",
  "scripts": {
    "prestart": "node-sass ./scss/theme.scss ./css/materialize-theme.css",
    "start": "lite-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Sunil Kumar",
  "license": "ISC",
  "devDependencies": {
    "lite-server": "^2.3.0"
  },
  "dependencies": {
    "materialize-css": "^0.100.2",
    "node-sass": "^4.7.2"
  }
}

我只想将应用的颜色从默认颜色更改为蓝色。所以我创建了 theme.scss 文件并使用 node-sass 模块尝试生成CSS文件。这是我的 theme.scss

$primary-color: color("blue", "lighten-2") !default;
@import "../node_modules/materialize-css/sass/materialize";

但是显示

{
  "status": 1,
  "file": "D:/SK/Study/MaterializeCSSDemo/node_modules/materialize-css/sass/components/_variables.scss",
  "line": 39,
  "column": 23,
  "message": "argument `$color` of `lighten($color, $amount)` must be a color\n\nBacktrace:\n\tnode_modules/materialize-css/sass/components/_variables.scss:39, in function `lighten`\n\tnode_modules/materialize-css/sass/components/_variables.scss:39",
  "formatted": "Error: argument `$color` of `lighten($color, $amount)` must be a color\n\n       Backtrace:\n       \tnode_modules/materialize-css/sass/components/_variables.scss:39, in function `lighten`\n       \tnode_modules/materialize-css/sass/components/_variables.scss:39\n        on line 39 of node_modules/materialize-css/sass/components/_variables.scss\n>> $primary-color-light: lighten($primary-color, 15%) !default;\n   ----------------------^\n"
}

是否有任何简单而干净的方式来修改主题？在文档页面上，直接更改 _variables.scss 文件即可。

Answer 1

试试这个

$primary-color: lighten(blue, 2) !default;

传递给函数的Args应该是颜色和数字。不是字符串。

scss中没有颜色功能。您可以使用其他功能（如hsl或rgb）创建颜色。查看scss函数的完整列表here

Answer 2

Materialize带有color palette，基于材质设计基色。

我建议您使用它们来设置主题颜色，以遵循Material Design color system。

为此，必须先导入定义这些颜色的文件，然后设置主题颜色变量，然后导入其余的实现文件。不确定我们的npm设置，但是在Rails with materialize-sass中，它的工作方式如下：

@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';

如何在materializecss中更改颜色主题

2 个答案: