reactjs - 使用 Webpack 5 typescript 构建的 React 在浏览器中编译时出现问题。@tailwind 指令不起作用 postcss-loader postcss.config.js 发射已跳过
问题描述
我正在尝试使用 Webpack 5、Tailwind CSS 和 Typescript 从头开始创建一个全新的反应应用程序。在将几个教程结合在一起之后，我对如何让 postcss-loader 为 Tailwind 工作感到迷茫。如果我输入常规的 .css，它似乎可以工作，但如果我像我在 global.tailwind.css 中尝试做的那样导入@tailwind - webpack 错误并出现以下错误。
问题：
为什么顺风导入指令不使用 Webpack 导入？如果我对 css 进行硬编码，它似乎可以正常工作。
我遇到了这个Stack Overflow 问题，但附加的链接不再有效。
任何建议或帮助都会很棒，因为我刚开始从头开始做出反应。在此之前我使用过 CRA（create-react-app）。如果我缺少有助于调试此问题的文件，请告诉我，我将编辑问题。
谢谢！
浏览器中的错误：
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。仍然没有运气
解决方案
我实际上有同样的问题。在阅读了您的问题后，我尝试了与您相同的方法，并创建了一个 global-tailwind.css 并将其导入 index.tsx ，它对我有用。
我所做的唯一区别是在 global-tailwind.css 中使用“@import”而不是使用“@tailwind”
@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，我还从 tailwind 文档中获得了此参考
推荐阅读
- declaration - 变量声明中的冒号有什么用？
- database - 我从哪里开始创建客户端服务器架构来存储数据？
- c# - 构建类库不更新 Visual Studio 中的引用
- mongodb - MongoDB 聚合管道无法正常工作
- python-3.x - 根据具体条件合并pandas数据框
- c++ - C ++拆分字符串并删除字符串的特定部分
- javascript - 按钮丢失时自动刷新
- reactjs - 我将如何使用 Jest 和 React 测试库对此进行测试？
- r - 生存包中的方法 quantile.survfit 是否有反函数？
- python - 使用 groupby() 和 value_counts()