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

[Elfayer]

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]

I downgraded to [email protected], same issue for $--checkbox-bordered-height missing in the element-variables.scss file. I had to go back to [email protected] to fix all this.

[WangHansen]

+1

[Leopoldthecoder]

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]

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]

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

[WangHansen]

I found the problem for me. I installed the [email protected] globally, that is why I am missing the variables. Removing the global package solved the problem.

[Elfayer]

Not my case:

$ npm -g list --depth=0
C:\Users\<username>\AppData\Roaming\npm
`-- [email protected]

[groenroos]

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

[Elfayer]

@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 [email protected] 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]

@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]

@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]

@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