[Error - input.scss] Undefined variable: "$--input-clear-hover-color"

Elfayer commented 6 years ago

Versions

element-theme: 2.0.1 element-ui: 2.0.7 element-theme-chalk: 2.0.7

Problem

When I run et -i, I get the file element-variables.scss. This file doesn't contain the variable $--input-clear-hover-color. And when I run et, I get the following output:

$>et

\ build element theme

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: node_modules\element-theme-chalk\src\input.scss
Error: Undefined variable: "$--input-clear-hover-color".
        on line 19 of node_modules/element-theme-chalk/src/input.scss
>>       color: $--input-clear-hover-color;
   -------------^

    at Object.module.exports.renderSync (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\node-sass\lib\index
.js:439:16)
    at DestroyableTransform._transform (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\gulp-sass\index.js:1
57:36)
    at DestroyableTransform.Transform._read (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\readable-stream
\lib\_stream_transform.js:182:10)
    at DestroyableTransform.Transform._write (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\readable-strea
m\lib\_stream_transform.js:170:83)
    at doWrite (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\readable-stream\lib\_stream_writable.js:406:
64)
    at writeOrBuffer (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\readable-stream\lib\_stream_writable.j
s:395:5)
    at DestroyableTransform.Writable.write (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\readable-stream\
lib\_stream_writable.js:322:11)
    at write (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\gulp\node_modules\readable-stream\lib\_stream_
readable.js:623:24)
    at flow (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\gulp\node_modules\readable-stream\lib\_stream_r
eadable.js:632:7)
    at DestroyableTransform.pipeOnReadable (C:\Users\rvanrent080817\AppData\Local\Yarn\config\global\node_modules\gulp\node_module
s\readable-stream\lib\_stream_readable.js:664:5)

How am I supposed to fix this?

Elfayer commented 6 years ago

I downgraded to element-theme-chalk@2.0.4, same issue for $--checkbox-bordered-height missing in the element-variables.scss file. I had to go back to element-theme-chalk@2.0.3 to fix all this.

WangHansen commented 6 years ago

+1

Leopoldthecoder commented 6 years ago

Please verify if node_modules/element-theme-chalk/src/common/var.scss has these variables. If not, make sure you have latest element-theme-chalk installed.

Elfayer commented 6 years ago

I have the latest version of element-theme-chalk and I do have both variables that element-theme is missing on my file node_modules/element-theme-chalk/src/common/var.scss. Still I get the error mentioned above.

Leopoldthecoder commented 6 years ago

I couldn't reproduce this on my computer. Could you minify your project and upload it to GitHub?

WangHansen commented 6 years ago

I found the problem for me. I installed the element-theme-chalk@2.0.3 globally, that is why I am missing the variables. Removing the global package solved the problem.

Elfayer commented 6 years ago

Not my case:

$ npm -g list --depth=0
C:\Users\<username>\AppData\Roaming\npm
`-- npm-check-updates@2.13.0

groenroos commented 6 years ago

I have the same issue; regardless of whether element-theme-chalk is installed globally or locally or not, it happens each time.

Elfayer commented 6 years ago

@groenroos What are your element-ui, element-theme-chalk and element-theme versions? I personally have those versions and it works now:

{
  "dependencies": {
    "element-ui": "^2.0.11",
  },
  "devDependencies": {
    "element-theme-chalk": "^2.0.11",
  }
}

And element-theme@2.0.1 globally.

Then simply run:

> et -i
> et

If you already have a element-variables.scss file, you don't have to run et -i.

Still doesn't work?

Remove node_modules
Run npm i
Run et

Still doesn't work?

Rename your file element-variables.scss to _element-variables.scss (to keep your modifications)
Run et -i (to create a new element-variables.scss file)
Replace manually the new file variables to the ones you have in your old file
Run et

snakepoon commented 6 years ago

@Elfayer I did as you suggest: Remove node_modules Run npm i Run et -i Run et But I still have missing variables while execute et. It should be the problem of file element-variables.scss. It was generated with missing variables by et -i. And I'm user below version: element-ui:2.3.3 element-theme:2.0.1 element-theme-chalk:2.3.3 And I still don't know how to go over this issue.

Elfayer commented 6 years ago

@snakepoon Correct, had to update again myself, there is a new issue. :weary: In my case it seems like element-theme is generating a file with the exact modifications I did before... But I am generating a new file, so where does it take this information from? Every time I touch this there is a problem. It's the first and last time I use element.

Elfayer commented 6 years ago

@snakepoon I made some testing and it finally works. I am not sure why, can you try the following and tell me if it fixes it for you?

Previous posts not working?

Skip steps that do not concern your case.

Remove folder /node_modules
Remove folder /theme
Run npm i
Run npm i element-theme-chalk -D
Make sure your version of element-ui is the same as element-theme-chalk in your package.json
Rename your file element-variables.scss to _element-variables.scss (to keep your modifications)
Run et -i (to create a new element-variables.scss file)
Replace manually the new file variables to the ones you have in your old file
Run et

ElementUI / element-theme