reactjs - Webpack 5 ile inşa edilmiş React, tarayıcıda derlenmiş typescript ile sorun yaşıyor. @tailwind direktifi çalışmıyor, postcss-loader, postcss.config.js Emit atlandı

Webpack 5, Tailwind CSS ve Typescript kullanarak sıfırdan yepyeni bir React uygulaması oluşturmaya çalışıyorum. Birkaç eğitim birleştirdikten sonra Tailwind için postcss-loader'ı nasıl çalıştıracağımı anlamakta kayboldum. Normal bir .css dosyası koyarsam çalışıyor gibi görünüyor ama global.tailwind.css içinde @tailwind'i içe aktarmaya çalışırsam, webpack aşağıdaki hatayla birlikte hata veriyor.

Soru :

Tailwind import yönergeleri neden Webpack kullanılarak içe aktarılmıyor? CSS'i elle yazarsam, düzgün çalışıyor gibi görünüyor.

Bu Stack Overflow sorunuyla karşılaştım ama ekli bağlantılar artık çalışmıyor.

Yeni başladığım için sıfırdan React başlatma konusunda herhangi bir öneri veya yardım harika olur. Bundan önce CRA (create-react-app) kullandım. Bu sorunu çözmeye yardımcı olabilecek eksik bir dosya varsa lütfen bana bildirin ve soruyu düzenleyeceğim.

Şablon 1 - Github

Şablon 2 - Hash Etkileşimli

Şablon 3 - Blog

Teşekkürler!

Tarayıcıda Hata:

Compiled with problems:X

ERROR in ./src/global.tailwind.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/src/index.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/global.tailwind.css)

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: postcss.config.js: Emit skipped
    at getOutput (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:938:17)
    at Object.compile (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:1237:30)
    at Module.m._compile (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:1364:30)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.require.extensions.<computed> [as .js] (/home/<omitted work directory>/<project name>/node_modules/ts-node/src/index.ts:1368:12)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at module.exports (/home/<omitted work directory>/<project name>/node_modules/postcss-loader/node_modules/import-fresh/index.js:28:9)

Webpack.config.ts

import path from 'path'
import { Configuration, HotModuleReplacementPlugin } from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
import ESLintPlugin from 'eslint-webpack-plugin'
import { CleanWebpackPlugin } from 'clean-webpack-plugin'
import MiniCssExtractPlugin from 'mini-css-extract-plugin'
import autoprefixer from 'autoprefixer'
import tailwindcss from 'tailwindcss'

const config: Configuration = {
  mode: "development",
  output: {
    publicPath: "/",
    clean: true,
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/i,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
      },
      {
        test: /\.(sa|sc|c)ss$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: { modules: true, sourceMap: true },
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: 'index.html'
    }),

    new HotModuleReplacementPlugin(),

    new ForkTsCheckerWebpackPlugin({
      async: false
    }),

    new MiniCssExtractPlugin({
      filename: '[name].bundle.css',
      chunkFilename: '[id].[contenthash].css'
    }),

    new ESLintPlugin({
      extensions: ["js", "jsx", "ts", "tsx"],
    }),
  ],
  devtool: "inline-source-map",
  devServer: {
    static: path.join(__dirname, "build"),
    historyApiFallback: true,
    port: 4000,
    open: true,
    hot: true
  },
};

export default config;

Package.json

{
  "name": "click-n-file",
  "version": "1.0.0",
  "description": "Click n' File is a document storage / retrieval system for finding all things loan related",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --config webpack.dev.config.ts --hot --history-api-fallback --progress",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.config.ts",
    "eslint": "eslint --ext .jsx --ext .js --ext .tsx --ext .ts src/",
    "eslint-fix": "eslint --fix --ext .jsx --ext .js --ext .tsx --ext .ts src/",
    "ci:install": "npm install",
    "ci:eslint": "npm run eslint",
    "ci:test": "react-scripts test --coverage --watchAll=false --passWithNoTests"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.15.8",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-typescript": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@types/fork-ts-checker-webpack-plugin": "^0.4.5",
    "@types/mini-css-extract-plugin": "^2.4.0",
    "@types/node": "^16.11.1",
    "@types/optimize-css-assets-webpack-plugin": "^5.0.4",
    "@types/react": "^17.0.30",
    "@types/react-dom": "^17.0.9",
    "@types/react-router-dom": "^5.3.1",
    "@types/tailwindcss": "^2.2.1",
    "@types/webpack-dev-server": "^4.3.1",
    "@typescript-eslint/eslint-plugin": "^5.1.0",
    "@typescript-eslint/parser": "^5.1.0",
    "autoprefixer": "^10.3.7",
    "babel-loader": "^8.0.0",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.0.0",
    "css-loader": "^6.4.0",
    "css-minimizer-webpack-plugin": "^3.1.1",
    "eslint": "^8.0.1",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^14.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.26.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-webpack-plugin": "^3.0.1",
    "fork-ts-checker-webpack-plugin": "^6.3.4",
    "html-webpack-plugin": "^5.4.0",
    "mini-css-extract-plugin": "^2.4.2",
    "node-sass": "^6.0.1",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "postcss": "^8.3.9",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "prettier": "^2.4.1",
    "sass": "1.32",
    "sass-loader": "^12.2.0",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.0",
    "terser-webpack-plugin": "^5.2.4",
    "ts-node": "^10.3.0",
    "tsconfig-paths-webpack-plugin": "^3.5.1",
    "typescript": "^4.0.0",
    "webpack": "^5.58.2",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.3.1"
  },
  "dependencies": {
    "postcss-cli": "^9.0.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0",
    "tailwindcss": "^2.2.17"
  }
}

global.tailwind.css (SCSS de denedim)

@tailwind base;
@tailwind components;
@tailwind utilities;

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

tailwind.config.js

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

DÜZENLE :

Ben de denedim

/* ./src/index.scss */
@import '~tailwindcss/base';
@import '~tailwindcss/components';
@import '~tailwindcss/utilities';

Doğru dosyalara (node_modules/tailwindcss) bağlanıyor, ama yine de yukarıdaki hatayı veriyor.

DÜZENLEME 2:

Ayrıca postcss-loader'ı kaldırmayı ve 3.0.0 yerine en son sürümü (6.2.0) yüklemeyi de denedim. Yine de şansım yaver gitmedi

Cevap #1

Aslında benim de aynı sorunum vardı. Sorunuuzu okuduktan sonra sizin yaptığınızı denedim ve global-tailwind.css dosyası oluşturdum ve bunu index.tsx içine import ettim ve benim için işe yaradı.

Yaptığım tek fark, global-tailwind.css içinde "@tailwind" kullanmak yerine "@import" kullanmam oldu.

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

css için webpack yapılandırma bloğu

  {
    test: /\.css$/i,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1
        }
      },
      'postcss-loader'
    ]
  }

sahip olduğum ilgili paket

/* package.json */
"postcss": "^8.3.9",
"postcss-import": "^14.0.2",
"postcss-loader": "^6.2.0",
"autoprefixer": "^10.3.7",
"tailwindcss": "^2.2.17",

Ve benim postcss.config'im

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');
const postcss = require('postcss-import');

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

Eğer postcss kullanıyorsanız, bu referansı tailwind belgelerinden de aldım.

https://tailwindcss.com/docs/using-with-preprocessors