React tailwind + sass build error - resolve-url-loader: error processing CSS

user_14403778 0
Viewed 309

Hey guys I have build a react app with tailwind and sass application and when ever i try to run build i get an error:

enter image description here

This are the files:

postcss.config.js:

module.exports = {
parser: 'postcss-scss',
plugins: [
    require('postcss-import'),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    require('tailwindcss'),
    require('postcss-preset-env')({
        features: { 'nesting-rules': false }
    }),
    require('autoprefixer'),
]

};

package.json:

{
  "name": "nessco-catalog",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@craco/craco": "^6.4.3",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.3",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.25",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "@types/react-helmet": "^6.1.5",
    "extract-text-webpack-plugin": "^3.0.2",
    "husky": "^7.0.4",
    "postcss": "^8.4.6",
    "postcss-import": "^14.0.2",
    "postcss-nesting": "^10.1.2",
    "postcss-preset-env": "^7.4.1",
    "postcss-scss": "^4.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-multi-carousel": "^2.8.0",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "resolve-url-loader": "^3.1.4",
    "sass": "^1.49.8",
    "typescript": "^4.5.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint \"**/*.{ts,tsx,js,jsx}\"",
    "prepare": "husky install",
    "build:css": "postcss src/styles/main.scss -o src/styles/index.scss"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@commitlint/cli": "^16.2.1",
    "@commitlint/config-conventional": "^16.2.1",
    "@types/react-slick": "^0.23.8",
    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "autoprefixer": "^10.4.2",
    "eslint": "^8.9.0",
    "eslint-plugin-jest": "^26.1.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "postcss-cli": "^9.1.0",
    "prettier": "^2.5.1",
    "prettier-eslint": "^13.0.0",
    "tailwindcss": "^3.0.23"
  }
}

Does it even possible to do this allin one file? where the sass main file is tailwind imports and then my regular sass content using tailwind utils with apply? becuase on npm start it works awesome... only on th build i have problem.

tailwind-css reactjs sass css javascript
1 Answers

It's likely due to a feature that your are using from tailwind that isn't being parsed properly via the resolve-url-loader package.

Solution A - Quick & Dirty

Add a dummy placeholder CSS property foo:bar; wherever you are using custom variables in custom tailwind classes. Read more here.

.dashboardCards {
    @apply bg-[#fff] hover:bg-[#d8fffe];
}

to

.dashboardCards {
    @apply bg-[#fff] hover:bg-[#d8fffe];
    foo: bar;
}

Solution B

In our project, the following was causing trouble in the .sass files - using custom colour variables.

  .menuItemContainer {
    @apply border-[#242424]  text-[#a4a6b3]; 
    @apply hover:border-[#5bbfbd] hover:bg-[#2e2e2e] hover:text-[#5bbfbd]
  }

So we changed it to standard sass/css way of writing styles.

.menuItemContainer {
    border-color: #242424;
    color: #a4a6b3;

    &:hover {
      border-color: #5bbfbd;
      color: #5bbfbd;
      background: #2e2e2e;
    }
  }

& voila build is fixed for the time being.

user_35565310
Related