css - Materialize CSS - 如何将颜色修改与 NPM 模块分开？

Question

我在电子应用程序中使用 materialize-css (0.100-2) 的 npm 模块。在 git 中不跟踪 Npm 模块。我对 SASS 组件进行了更改，特别是这些文件:

node_modules/
+-- materialize-css/
    +-- sass/
        materialize.scss    <-- changes
        +-- components/
            ...
            _color.scss     <-- changes
            _variables.scss <-- changes
            _palette.css    <-- new file I added

我已经使用此处的说明在 node_modules/materialize-css/dist/css 中编译了新的 materialize.css:http://materializecss.com/getting-started.html一切正常。

但是，我打算升级到 1.0.0-beta 并且需要将我的修改保留在 git 中。关于如何将我的修改与 SASS 文件分开但在编译 CSS 时仍然包含它们的任何想法或最佳实践？

Answer 1

您不应该直接更改您的 node_modules 文件，您应该在元素根目录中定义另一个文件，例如:app.scss

/
  ...
  node_modules/
  ...
  app.css
  package.json

如此处所示:http://materializecss.com/sass.html ，您现在可以在 app.scss 文件中更改您的 palette 等:

// Import materialize-css
@import "~materialize-css/sass/materialize";

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: false !default;
$primary-color-dark: false !default;
@if not $primary-color-light {
  $primary-color-light: lighten($primary-color, 15%);
}
@if not $primary-color-dark {
  $primary-color-dark: darken($primary-color, 15%);
}
$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;

$link-color: color("light-blue", "darken-1") !default;

/*** More variables not shown here.. ***/

注意您将需要添加一个sass 编译器。