SassError: (path: (fill: #74797d)) isn't a valid CSS value

76 views Asked by At

I'm trying to get an older project up and running but I have issues with sass and blueprint.js. I saw a similar issue on Stackoverflow but it was for Next.js and I'm using React...

Uncaught Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: (path: (fill: #74797d)) isn't a valid CSS value.
   ╷
39 │       background: svg-icon("16px/chevron-right.svg", (path: (fill: $pt-icon-color)));
   │                                                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ value
   │                   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ unknown function treated as plain CSS
   ╵
  node_modules/@blueprintjs/core/src/components/breadcrumbs/_breadcrumbs.scss 39:54  @import
  node_modules/@blueprintjs/core/src/components/_index.scss 5:9                      @import
  node_modules/@blueprintjs/core/src/blueprint.scss 16:9                             @import
  /Users/nikola/Documents/Work/password-manager/password-manager-frontend/src/scss/blueprint-stagefront.scss 126:9                                                                        root stylesheet
    at ./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/resolve-url-loader/index.js?!./node_modules/sass-loader/dist/cjs.js?!./src/scss/blueprint-stagefront.scss (ag-grid-stagefront.scss:7:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at ./src/scss/blueprint-stagefront.scss (blueprint-stagefront.scss:2:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at ./src/index.tsx (index.css:45:1)
    at __webpack_require__ (bootstrap:784:1)
    at fn (bootstrap:150:1)
    at 1 (StageFrontLogo.png:1:1)
    at __webpack_require__ (bootstrap:784:1)
    at checkDeferredModules (bootstrap:45:1)
    at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
    at main.chunk.js:1:77

I'm using "sass": "^1.69.5" and "@blueprintjs/core": "^3.35.0". Here's everything if I missed some important dependencies.

{
  "name": "arvin-client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blueprintjs/core": "^3.35.0",
    "@blueprintjs/datetime": "^3.20.0",
    "@blueprintjs/select": "^3.15.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@stagefront/components": "file:components-0.4.5.tar",
    "axios": "^0.21.0",
    "lodash": "^4.17.20",
    "logrocket": "^1.0.14",
    "luxon": "^1.25.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-is": "^18.2.0",
    "react-json-view": "^1.21.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "swr": "^0.3.6",
    "web-vitals": "^3.5.0"
  },
  "resolutions": {
    "**/@typescript-eslint/eslint-plugin": "^4.7.0",
    "**/@typescript-eslint/parser": "^4.7.0"
  },
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test --env=jest-environment-jsdom-sixteen",
    "eject": "react-scripts eject"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@ag-grid-community/react": "24.0.0",
    "@ag-grid-enterprise/all-modules": "24.0.0",
    "@craco/craco": "5.8.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^7.1.2",
    "@types/history": "^4.7.8",
    "@types/jest": "^24.0.0",
    "@types/lodash": "^4.14.164",
    "@types/luxon": "^1.25.0",
    "@types/node": "^14.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-router-dom": "^5.1.6",
    "@types/styled-components": "^5.1.4",
    "babel-eslint": "^10.1.0",
    "jest-environment-jsdom-sixteen": "^1.0.3",
    "postcss": "^7",
    "postcss-import": "^14.0.0",
    "sass": "^1.69.5",
    "styled-components": "^5.2.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "typescript": "^4"
  },
  "peerDependencies": {
    "localforage": "^1.9.0"
  }
}

I'm somewhat new to React and I don't have a clue what to do. I tried with node-sass and sass but the result is the same...

0

There are 0 answers