SCSS build error - Githubissues

Sgiath commented 7 years ago

MDC-Web version: 0.22.0 (have the same issue at least from 0.12.0) OS: Arch Linux 4.13.3-1-ARCH Steps to reproduce: I don't have specific steps. It happens on various project with different setups.

I start the project (usually create-react-app) and I setup MDC with SCSS (I want to change theme colors).

src/styles.scss:

$mdc-theme-primary: #212121;
$mdc-theme-secondary: #64dd17;
$mdc-theme-background: #fff;

@import "material-components-web/material-components-web";

I am building the CSS with this command node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ and it usually works for some time (1 - 3 hours). But then suddenly this error will appear:

{
  "status": 1,
  "file": "./node_modules/@material/ripple/_mixins.scss",
  "line": 67,
  "column": 23,
  "message": "argument `$color` of `rgba($color, $alpha)` must be a color\n\nBacktrace:\n\tnode_modules/@material/ripple/_mixins.scss:67, in function `rgba`\n\tnode_modules/@material/ripple/_mixins.scss:67, in mixin `mdc-ripple-color-`\n\tnode_modules/@material/ripple/_mixins.scss:85, in mixin `mdc-ripple-bg-base-`\n\tnode_modules/@material/ripple/_mixins.scss:106, in mixin `mdc-ripple-bg`\n\tnode_modules/@material/button/mdc-button.scss:71",
  "formatted": "Error: argument `$color` of `rgba($color, $alpha)` must be a color\n\n       Backtrace:\n       \tnode_modules/@material/ripple/_mixins.scss:67, in function `rgba`\n       \tnode_modules/@material/ripple/_mixins.scss:67, in mixin `mdc-ripple-color-`\n       \tnode_modules/@material/ripple/_mixins.scss:85, in mixin `mdc-ripple-bg-base-`\n       \tnode_modules/@material/ripple/_mixins.scss:106, in mixin `mdc-ripple-bg`\n       \tnode_modules/@material/button/mdc-button.scss:71\n        on line 67 of node_modules/@material/ripple/_mixins.scss\n>>     background-color: rgba($theme-value, $opacity);\n   ----------------------^\n"
}

and there is nothing I can do with it. I tried deleting node_modules/ folder, git cloning it on another computer, etc. ... nothing works. I am not ejecting create-react-app and I am using yarn. The weirdies thing is that it works initially but after some time it will break.

Here is snapshot of my package.json right now (Electron but happens in web apps as well) but it happens with different configurations as well. I wasn't able to find any pattern:

{
  "homepage": "./",
  "dependencies": {
    "@react-mdc/button": "^0.1.8",
    "@react-mdc/layout-grid": "^0.1.9",
    "@react-mdc/switch": "^0.1.9",
    "@react-mdc/textfield": "^0.1.11",
    "@react-mdc/typography": "^0.1.8",
    "flag": "^2.0.4",
    "history": "^4.7.2",
    "material-components-web": "^0.22.0",
    "node-sass-chokidar": "^0.0.3",
    "prop-types": "^15.6.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-redux-subspace": "^2.0.6",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-scripts": "1.0.14",
    "redux": "^3.7.2",
    "redux-logger": "^3.0.6",
    "redux-perf-middleware": "^1.2.2",
    "redux-saga": "^0.15.6",
    "redux-subspace": "^2.0.6",
    "redux-subspace-saga": "^2.0.6"
  },
  "main": "electron/starter.js",
  "scripts": {
    "start": "npm-run-all -p watch-css start-react start-electron",
    "electron": "electron .",
    "start-react": "react-scripts start",
    "start-electron": "NODE_ENV=development node electron/wait-for-react",
    "build": "yarn run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "pack": "yarn run build && electron-builder --dir",
    "dist": "yarn run build && electron-builder",
    "postinstall": "electron-builder install-app-deps",
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "yarn run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive"
  },
  "devDependencies": {
    "asar": "^0.13.0",
    "electron": "^1.7.8",
    "electron-builder": "^19.33.0",
    "electron-devtools-installer": "^2.2.0",
    "npm-run-all": "^4.1.1"
  }
}

Thanks all for helping

acdvorak commented 7 years ago

I suspect that one of material-components-web's dependencies is out of date; try upgrading with yarn upgrade or react-scripts.

The line number in the stack trace for mdc-button.scss is 71, but the last time that file had at least 71 lines was several weeks ago, so you likely have a stale version somehow.

After you try upgrading, double-check the versions in node_modules to verify you actually have the most recent versions.

If that doesn't solve the issue, you can try temporarily editing node_modules/@material/ripple/_mixins.scss and adding @debug "$color = '#{$color}'"; just before the rgba(...) line. Then, when you recompile, we'll know what value it's trying to pass in, which might help us figure out what's going on.

If you're still stuck after all that, feel free to hop on our Discord #web channel and we'll be happy to help troubleshoot.

kfranqueiro commented 7 years ago

Given no further response, I'm closing this issue. Feel free to reach out as previously noted if the previous suggestions didn't help. Thanks!

material-components / material-components-web

SCSS build error #1388