nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク
https://nostalgic-css.github.io/NES.css/
MIT License
20.64k stars 1.65k forks source link

Custom theme #459

Open loo41 opened 3 years ago

loo41 commented 3 years ago

https://github.com/nostalgic-css/NES.css/blob/444faf05d1427c007e3aab24ba8441c84c6c04ab/scss/base/variables.scss#L8

Describe the bug

When I try to use a custom theme

To Reproduce

// xx.scss
$primary-colors: (
  normal: red,
  hover: red,
  shadow: red,
) !default;

@import "nes.css/scss/nes.scss";
截屏2021-05-12 下午11 19 12

Expected behavior

When I remove this

截屏2021-05-12 下午11 20 41

Environment:

Suggestion(s) for fixing this issue In my opinion, should we not rely on the JS transformation Base64, but use the transformation directly?,Is it possible to provide the ability to customize the theme。

Additional context In the component library I'm developing, I'm trying to provide a set of custom themes

ZOUHEIRBN commented 1 year ago

Same issue, I'm trying to alter the success color to a brighter green but to no avail. When I import variables like this: @import "node_modules/nes.css/scss/base/variables"; it gives me this error in compilation:


HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
5 │ $base-color: $color-black !default;
  │              ^^^^^^^^^^^^
  ╵
  node_modules\nes.css\scss\base\variables.scss 5:14  @import
  src\styles.scss 3:9                                 root stylesheet

× Failed to compile.```