我正在尝试使用Webpack 5，顺风CSS和Typescript从头开始创建一个全新的react应用程序。在结合了几个教程之后，我迷失了如何让postcss加载器为Tailwind工作。如果我输入常规的。css，它似乎可以工作，但如果我导入@tailwind，因为我试图在global.tailwind.css中做- webpack错误与下面的错误。
问题:
为什么顺风导入指令不使用Webpack导入?如果我硬编码css，它似乎工作良好。
我遇到了这个堆栈溢出问题，但附加的链接不再工作。
任何建议或帮助将是梦幻般的，因为我是新的开始从地面上反应。在此之前我使用了CRA(创造-反应-应用)。如果我缺少有助于调试此问题的文件，请让我知道，我会编辑问题。
模板1 - Github
模板2 -哈希交互
模板3 -博客
谢谢!
浏览器错误:
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。还是没有运气
我实际上也有同样的问题。在我阅读你的问题之后，我尝试了和你一样，创建了一个全局的tailwind.css并将其导入索引中。TSX，它对我很有效。
唯一不同的是我没有使用"@tailwind"我使用"@import"全局变量
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
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