...fr/px isn't a valid CSS value.

[liubko]

Deps

"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",

Description

this App.scss file produces such error

// App.scss
$toolbox-width: 220px;
.App {
  grid-template:
    "header  header  header" 48px
    "toolbox content setting" 1fr
    / $toolbox-width 1fr 260px;
}

Error:

[../node_modules/css-loader/index.js?!../node_modules/sass-loader/lib/loader.js?!./src/App.scss] ../node_modules/css-loader??ref--4-oneOf-1-1!../node_modules/sass-loader/lib/loader.js??ref--4-oneOf-1-2!./src/App.scss 308 bytes {main} [built] [failed] [1 error]
    + 1577 hidden modules

ERROR in ./src/App.scss (../node_modules/css-loader??ref--4-oneOf-1-1!../node_modules/sass-loader/lib/loader.js??ref--4-oneOf-1-2!./src/App.scss)
Module build failed (from ../node_modules/sass-loader/lib/loader.js):

    "toolbox content setting" 1fr
                             ^
      0.00455fr/px isn't a valid CSS value.
      in /path/to/my/project/src/App.scss (line 5, column 31)
 @ ./src/App.scss 2:14-157 21:1-42:3 22:19-162
 @ ./src/App.bs.js
 @ ./src/index.bs.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 (webpack)/hot/dev-server.js ./src/index.bs.js

Notes

1. this compiles without errors

.App {
  grid-template:
    "header  header  header" 48px
    "toolbox content setting" 1fr
    / 220px 1fr 260px;
}

2. might be related to isn't a valid CSS value - sass-loader can't parse font shorthand options that are 100% valid for css #459
3. I don't know whether it's related to sass-loader at all..

[alexander-akait]

@liubko you have invalid sass/scss code, we don't change anything in your code, we just wrapper around node-sass for webpack, if you think what you have valid code and still get error, please create issue in node-sass or sass repo, thanks!

[liubko]

ok, submitted an issue here sass/libsass#2706