【问题标题】：React tailwind + sass build error - resolve-url-loader: error processing CSSReact tailwind + sass 构建错误 - resolve-url-loader：错误处理 CSS
【发布时间】：2022-10-06 05:59:35
【问题描述】：

嘿伙计们，我已经用 tailwind 和 sass 应用程序构建了一个反应应用程序，当我尝试运行构建时，我得到一个错误：

这是文件：

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\'),
]

};

包.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\"
  }
}

甚至可以在一个文件中执行此操作吗？ sass 主文件在哪里是顺风导入，然后是我使用顺风实用程序和应用的常规 sass 内容？因为在 npm start 上它工作得很棒......只有在构建时我才有问题。

你设法解决了这个问题吗？

标签： javascript css reactjs sass tailwind-css

【解决方案1】：

这可能是由于您从 tailwind 中使用的功能没有通过 resolve-url-loader 包正确解析。

解决方案 A - 又快又脏

添加一个虚拟占位符 CSS 属性 foo:bar; 在自定义顺风类中使用自定义变量的任何位置。 Read more here.

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

至

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

解决方案 B

在我们的项目中，以下问题在 .sass 文件中造成了问题 - 使用自定义颜色变量。

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

所以我们将其更改为标准的 sass/css 编写方式。

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

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

et voila build 暂时是固定的。

【讨论】：

【解决方案2】：

我有一个类似的问题。我的解决方法是更改配置：

tsconfig.json

{
  "compilerOptions": {
     "module": "es6",
     "moduleResolution": "node",
     "allowJs": true,
     "resolveJsonModule": true,
     "target": "es6",
     "jsx": "react",
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
}

tailwind.config.js

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     colors: {
        transparent: 'transparent',
        black: '#000',
        white: '#fff',
     },
   },
   plugins: [],
};

postcss.config.js

const tailwindcss = require('tailwindcss');
  module.exports = {
     plugins: [
       tailwindcss('./tailwind.config.js'),
       require('autoprefixer'),
     ],
};

包.json

{
    "name": "react-typescript-webpack",
    "version": "1.0.0",
    "main": "index.js",
    "scripts": {
        "dev": "webpack serve --mode development --progress --hot --config ./webpack.config.development.js",
        "build": "webpack --mode production --config ./webpack.config.production.js"
    },
    "keywords": [
        "react",
        "typescript",
        "webpack",
        "scss"
    ],
    "dependencies": {
        "autoprefixer": "^10.4.12",
        "i18next": "^21.9.2",
        "postcss-cli": "^10.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-i18next": "^11.18.6",
        "react-router-dom": "^5.3.4",
        "tailwindcss": "^3.1.8"
    },
    "devDependencies": {
        "@types/react": "^18.0.15",
        "@types/react-dom": "^18.0.6",
        "@types/react-router-dom": "^5.3.3",
        "clean-webpack-plugin": "^4.0.0",
        "copy-webpack-plugin": "^11.0.0",
        "css-loader": "^6.7.1",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.5.0",
        "mini-css-extract-plugin": "^2.6.1",
        "postcss": "^8.4.14",
        "postcss-loader": "^7.0.1",
        "postcss-preset-env": "^7.7.2",
        "sass": "^1.53.0",
        "sass-loader": "^13.0.2",
        "style-loader": "^3.3.1",
        "terser-webpack-plugin": "^5.3.3",
        "ts-loader": "^9.3.1",
        "typescript": "^4.7.4",
        "webpack": "^5.73.0",
        "webpack-cli": "^4.10.0",
        "webpack-dev-server": "^4.9.3"
    }
}

应用程序.scss

.row-square {
    .square {
        @apply flex h-[60px] w-[60px] md:h-[80px] md:w-[80px] items-center justify-center bg-[#ffffff] active:scale-125 transition duration-200 ease-in hover:bg-[#ffffff];

        button {
            @apply h-[60px] w-[60px] md:h-[80px] md:w-[80px] border;
        }

        .player-1 {
            @apply bg-blue-100;
        }

        .player-2 {
            @apply bg-yellow-100;
        }

        .player-3 {
            @apply bg-green-100;
        }
    }
}

【讨论】：