在浏览器中编译有问题的Webpack 5打字脚本的反应。@顺风指令不工作postcss-loader postcss.config.js发送已跳过

Question

我正在尝试使用带有Typescript的Webpack 5创建一个全新的react应用程序，Tailwind CSS。在将几个教程组合在一起后，我对如何让postcss-loader在Tailwind上工作感到迷惑。如果我放入常规的.css，它似乎可以工作，但如果我导入@tailwind，就像我在global.tailwind.css中尝试做的那样- webpack错误地输出了下面的错误。

问题：

为什么顺风导入指令不使用Webpack导入？如果我硬编码css，它似乎工作得很好。

我偶然发现了这个Stack Overflow issue，但附加的链接不再起作用。

任何建议或帮助都将是奇妙的，因为我是一个从头开始反应的新成员。在此之前，我使用了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;

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)

@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

其实我也有同样的问题。在我读完你的问题后，我尝试了和你一样，创建了一个全局的-trawind.css，并将它导入到index.tsx中，它对我起作用了。

唯一不同的是，我没有使用"@tailwind“，而是在global-trawind.css文件中使用了"@import”。

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

用于css的webpack配置块

  {
    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，我也从顺风文档中获得了这个参考。

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