尝试使用 Laravel Mix 将 Tailwind CSS 添加到 Wordpress 项目时出现“未找到模块”

Posted 2023-03-06

【中文标题】尝试使用 Laravel Mix 将 Tailwind CSS 添加到 Wordpress 项目时出现“未找到模块”

【英文标题】："Module not found" when trying to add Tailwind CSS to a Wordpress project with Lararavel Mix

【发布时间】：2021-02-28 10:55:31

【问题描述】：

我正在尝试探索 Tailwindcss，并希望将其添加到新的 Wordpress 项目中。我正在使用 Laravel Mix 来编译资产。

设置完所有内容并运行“npm run dev”后，我收到以下错误：

./assets/src/main.css 中的错误模块构建失败（来自 ./node_modules/css-loader/index.js): ModuleNotFoundError: Module not 发现：错误：无法解析“./node_modules/tailwindcss/base.css” ...

我目前的设置基于这篇文章： https://paulund.co.uk/using-tailwind-css-in-your-wordpress-theme

这是我的 package.json 的代码

  "name": "tailwind-wordpress",
  "version": "1.0.0",
  "description": "WP Theme with Tailwind CSS",
  "dependencies": 
    "cross-env": "^6.0.3",
    "laravel-mix": "^5.0.0",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^1.1.2"
  ,
  "scripts": 
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "npm run development -- --watch",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  

这是 webpack.mix.js 的内容

const mix = require('laravel-mix');

mix.postCss('./assets/src/main.css', './assets/dist/main.css', [
    require('tailwindcss'),
])

还有 main.css：

@import 'node_modules/tailwindcss/base.css';

@import 'node_modules/tailwindcss/components.css';

@import 'node_modules/tailwindcss/utilities.css';

任何想法如何解决这个问题？非常感谢所有帮助。

【参考方案1】：

如果你正在使用 webpack 和所有你应该使用的爵士乐

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