模塊解析失敗：意外字符“@”

Question

我正在創建一個不使用 npx create-react-app 的React 應用程序，我正在使用 webpack，並嘗試使用 tailwind CSS。 但是出現錯誤。

我應該如何對 React 應用程序進行配置，以便我可以在其中使用 Tailwind？

錯誤：

ERROR in ./index.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @tailwind base;
| @tailwind components;
| @tailwind utilities;
 @ ./index.js 4:0-21

webpack 5.75.0 compiled with 1 error in 43 ms

React 應用程序中的 Index.css：

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

React 應用的 index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./src/App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我的 webpack 文件：

const path = require("path");

/*We are basically telling webpack to take index.js from entry. Then check for all file extensions in resolve. 
After that apply all the rules in module.rules and produce the output and place it in main.js in the public folder.*/

module.exports = {
  /** "mode"
   * the environment - development, production, none. tells webpack
   * to use its built-in optimizations accordingly. default is production
   */
  mode: "development",
  /** "entry"
   * the entry point
   */
  entry: "./index.js",
  output: {
    /** "path"
     * the folder path of the output file
     */
    path: path.resolve(__dirname, "public"),
    /** "filename"
     * the name of the output file
     */
    filename: "main.js",
  },
  /** "target"
   * setting "node" as target app (server side), and setting it as "web" is
   * for browser (client side). Default is "web"
   */
  target: "web",
  devServer: {
    /** "port"
     * port of dev server
     */
    port: "3000",
    /** "static"
     * This property tells Webpack what static file it should serve
     */
    static: ["./public"],
    /** "open"
     * opens the browser after server is successfully started
     */
    open: true,
    /** "hot"
     * enabling and disabling HMR. takes "true", "false" and "only".
     * "only" is used if enable Hot Module Replacement without page
     * refresh as a fallback in case of build failures
     */
    hot: true,
    /** "liveReload"
     * disable live reload on the browser. "hot" must be set to false for this to work
     */
    liveReload: true,
  },
  resolve: {
    /** "extensions"
     * If multiple files share the same name but have different extensions, webpack will
     * resolve the one with the extension listed first in the array and skip the rest.
     * This is what enables users to leave off the extension when importing
     */
    extensions: [".js", ".jsx", ".json"],
  },
  module: {
    /** "rules"
     * This says - "Hey webpack compiler, when you come across a path that resolves to a '.js or .jsx'
     * file inside of a require()/import statement, use the babel-loader to transform it before you
     * add it to the bundle. And in this process, kindly make sure to exclude node_modules folder from
     * being searched"
     */
    rules: [
      {
        test: /\.js|\.jsx$/, //kind of file extension this rule should look for and apply in test
        exclude: /node_modules/, //folder to be excluded
        use: {
          loader: "babel-loader", //loader which we are going to use
          options: {
            presets: ["@babel/preset-react", "@babel/preset-env"],
          },
        },
      },

      {
        test: /\.(css|sass)$/i,
        include: path.resolve(__dirname, "src"),
        use: ["style-loader", "css-loader", "sass-loader", "raw-loader"],
      },
    ],
  },
};

我的 package json

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server .",
    "build": "webpack"
  },
  "author": "Ravi_Bro",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.20.7",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/runtime": "^7.20.7",
    "babel-loader": "^9.1.0",
    "css-loader": "^6.7.3",
    "eslint": "^8.30.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "json-server": "^0.17.1",
    "postcss": "^8.4.20",
    "postcss-import": "^15.1.0",
    "postcss-loader": "^7.0.2",
    "postcss-preset-env": "^7.8.3",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.2.4",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "@babel/cli": "^7.20.7",
    "@tanstack/react-query": "^4.20.4",
    "axios": "^1.2.2",
    "babel-preset-es2015": "^6.24.1",
    "node-sass": "^8.0.0",
    "path": "^0.12.7",
    "path-to-regexp": "^6.2.1",
    "raw-loader": "^4.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-query": "^3.39.2",
    "sass-loader": "^13.2.0"
  }
}

Answer 1

您還可以提供 tailwind.config.js 嗎？

在 package.json 中也安裝了 postcss 庫，文檔說在 create react app 中不支持 postcss 庫。 請檢查這里。

https://tailwindcss.com/docs/guides/create-react-app

Answer 2

您必須將postcss加載程序（它將使用 tailwind 獲取配置）添加到 module.rules 中的加載程序use鏈中，並進行test: /\.(css|sass)$/i module.rules