0

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

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

./assets/src/main.css 中的错误模块构建失败（来自 ./node_modules/css-loader/index.js）：ModuleNotFoundError：找不到模块：错误：无法解析 './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';

任何想法如何解决这个问题？高度赞赏所有帮助。

4

1 回答 1

1

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

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
于 2021-01-25T10:13:46.533 回答