reactjs - 使用 Webpack 5 typescript 构建的 React 在浏览器中编译时出现问题。 @tailwind 指令不工作 postcss-loader postcss.config.js Emit skipped

Question

我正在尝试使用 Webpack 5、Tailwind CSS 和 Typescript 从头开始​​创建一个全新的 React 应用程序。结合几个教程后，我不知道如何让 postcss-loader 为 Tailwind 工作。如果我放入常规 .css，它似乎可以工作，但如果我像我在 global.tailwind.css 中尝试做的那样导入 @tailwind - webpack 出错并显示以下错误。

问题:

为什么 tailwind 导入指令不使用 Webpack 导入？如果我硬编码 css，它似乎工作正常。

我遇到了这个 Stack Overflow issue但附加链接不再有效。

任何建议或帮助都会很棒，因为我刚开始从头开始使用react。在此之前我使用了 CRA(create-react-app)。如果我遗漏了有助于调试此问题的文件，请告诉我，我将编辑问题。

Template 1 - Github

Template 2 - Hash Interactive

Template 3 - Blog

谢谢!

浏览器错误:

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;

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

@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: [],
}

编辑:

我也试过

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

哪个链接到正确的文件(node_modules/tailwindcss)，但仍然给我上面的错误。

编辑 2:

我还尝试删除 postcss-loader 并安装最新版本 (6.2.0) 而不是 3.0.0。仍然没有运气

Answer 1

我实际上有同样的问题。阅读您的问题后，我尝试了与您相同的操作并创建了一个 global-tailwind.css 并将其导入到 index.tsx 中，它对我有用。

我所做的唯一区别是我在 global-tailwind.css 中使用“@import”而不是使用“@tailwind”

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

css 的 webpack 配置 block

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

我有相关包

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

还有我的 postcss.config

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

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

如果您使用的是 postcss，我还从 tailwind 文档中获得了这个引用

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