Can't build site : SCSS processing failed : must be a color must be a color

[nlamirault]

❯ git submodule update --force --recursive --init --remote && cd docs && npm install postcss-cli && hugo                                                                                                            
Submodule 'docs/themes/docsy' (https://github.com/google/docsy.git) registered for path 'docs/themes/docsy'                                                                                                         
Cloning into '/tmp/portefaix/docs/themes/docsy'...                                                                                                                                                                  
Submodule path 'docs/themes/docsy': checked out '534729d6d6f25f106a9dd66cd11d3b0a7e777acf'                                                                                                                          
Submodule 'assets/vendor/Font-Awesome' (https://github.com/FortAwesome/Font-Awesome.git) registered for path 'docs/themes/docsy/assets/vendor/Font-Awesome'                                                         
Submodule 'assets/vendor/bootstrap' (https://github.com/twbs/bootstrap.git) registered for path 'docs/themes/docsy/assets/vendor/bootstrap'                                                                         
Cloning into '/tmp/portefaix/docs/themes/docsy/assets/vendor/Font-Awesome'...                                                                                                                                       
Cloning into '/tmp/portefaix/docs/themes/docsy/assets/vendor/bootstrap'...                                                                                                                                          
Submodule path 'docs/themes/docsy/assets/vendor/Font-Awesome': checked out 'fcec2d1b01ff069ac10500ac42e4478d20d21f4c'                                                                                               
Submodule path 'docs/themes/docsy/assets/vendor/bootstrap': checked out '5560c86070c8be08f76801bbc7e525eea4fc0cf6'                                                                                                  
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules/chokidar/node_modules/fsevents):                                                                                                      
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})                                                   
                                                                                                                                                                                                                    
+ postcss-cli@7.1.2                                                                                                                                                                                                 
added 116 packages from 107 contributors and audited 117 packages in 5.58s

13 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Start building sites …                                                                                                                                                                                              
WARN 2021/02/25 07:52:08 Page.URL is deprecated and will be removed in a future release. Use .Permalink or .RelPermalink. If what you want is the front matter URL value, use .Params.url                           
Total in 383 ms                                                                                                                                                                                                     
Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): SCSS processing failed: file "/tmp/portefaix/docs/themes/docsy/assets/scss/_colors.scss", line 4, col 18: argument `$color2` 
of `mix($color1, $color2, $weight: 50%)` must be a color                                                                                                                                                            

With Hugo :

$ ❯ hugo version
Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: unknown

Any idea how fix that ?

[LisaFC]

If you're using version 8 of postcss (or higher) you need to install postcss as well as postcss-cli, they've unbundled them - maybe check that first?

[nlamirault]

Same error @LisaFC . I try with a fresh repository :

❯ git clone git@github.com:google/docsy-example.git                                                                                                                                                                 
Cloning into 'docsy-example'...                                                                                                                                                                                     
remote: Enumerating objects: 6, done.                                                                                                                                                                               
remote: Counting objects: 100% (6/6), done.                                                                                                                                                                         
remote: Compressing objects: 100% (6/6), done.                                                                                                                                                                      
remote: Total 1253 (delta 1), reused 3 (delta 0), pack-reused 1247                                                                                                                                                  
Receiving objects: 100% (1253/1253), 2.50 MiB | 4.06 MiB/s, done.                                                                                                                                                   
Resolving deltas: 100% (626/626), done.                                                                                                                                                                             
                                                                                               
❯ cd docsy-example                                                                                                                                                                                                  
                                                                  
❯ git submodule update --force --recursive --init --remote                                                                                                                                                          
Submodule 'themes/docsy' (https://github.com/google/docsy) registered for path 'themes/docsy'                                                                                                                       
Cloning into '/tmp/docsy-example/themes/docsy'...                                                                                                                                                                   
Submodule path 'themes/docsy': checked out '20d76ee453c60180121c89772e32ed137566e312'                                                                                                                               
Submodule 'assets/vendor/Font-Awesome' (https://github.com/FortAwesome/Font-Awesome.git) registered for path 'themes/docsy/assets/vendor/Font-Awesome'                                                              
Submodule 'assets/vendor/bootstrap' (https://github.com/twbs/bootstrap.git) registered for path 'themes/docsy/assets/vendor/bootstrap'                                                                              
Cloning into '/tmp/docsy-example/themes/docsy/assets/vendor/Font-Awesome'...                                                                                                                                        
Cloning into '/tmp/docsy-example/themes/docsy/assets/vendor/bootstrap'...
Submodule path 'themes/docsy/assets/vendor/Font-Awesome': checked out 'fcec2d1b01ff069ac10500ac42e4478d20d21f4c'
Submodule path 'themes/docsy/assets/vendor/bootstrap': checked out '5560c86070c8be08f76801bbc7e525eea4fc0cf6'

❯ npm install postcss postcss-cli
                                                     
added 117 packages, and audited 118 packages in 1s                                                        
                                                                                                          
found 0 vulnerabilities   

❯ hugo
Start building sites … 
Total in 1050 ms
Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss): SCSS processing failed: file "/tmp/docsy-example/themes/docsy/assets/scss/_colors.scss", line 4, col 18: argument `$color2` o
f `mix($color1, $color2, $weight: 50%)` must be a color 

[nlamirault]

Installed verssion are :

  "name": "postcss",
  "version": "7.0.35",
  "description": "Tool for transforming styles with JS plugins",

  "name": "postcss-cli",
  "version": "7.1.2",
  "description": "CLI for PostCSS",

[LisaFC]

Ok, let me give it a go. I haven't tried building the example site with Hugo 0.8.0 (and higher) so could be something in there...

[LisaFC]

So mine just built fine with Hugo 0.80.0 and these postcss versions:

  "devDependencies": {
    "autoprefixer": "^10.2.4",
    "postcss-cli": "^8.0.0",
    "postcss": "^8.2.6"
  }

Is yours just a straight copy of the Docsy example?

[LisaFC]

Just noticed someone else got exactly the same error in #304 because they were using a very new (alpha at the time) version of Bootstrap, let me investigate further. I see Bootstrap 5 is in beta now so if it breaks our site we may need to make some adjustments....

Though if you just cloned the example site you would have the theme's current version of Bootstrap, which is 4.5.3, I'm not sure how you'd have a different one.

[LisaFC]

OK, so I looked more closely at your shell output up there, and you actually have Bootstrap checked out somewhere close to head (last updated 6 days ago), which means you are somewhere past v5 beta and may have hit breaking changes. I think the problem is that you've updated Docsy's own submodules rather than just pulled them down, which means you're getting the current repo versions of Bootstrap and FontAwesome (which we do not currently want, as they're beyond the latest GA release).

If you try just

git submodule update --init --recursive

(not --remote as that's what's causing it to go off and get not just the latest version of Docsy, but the latest versions of Docsy's own submodules as well)

[LisaFC]

Did you try my suggestion and did it work?

[nlamirault]

Yes @LisaFC . Thanks for your help

[RenaudDenis]

👍