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...