0

我喜欢在我的 React 和 Laravel 项目中使用 Tailwind CSS。
现在我已经开始学习 NestJS，我想在我的项目中使用 Tailwind CSS，但我做不到。
由于我在谷歌上找不到任何结果，所以我问你们。

我将不胜感激任何资源或您的详细回答。

我的项目目前的状态如下。我不知道我哪里出错了，TailwindCSS 不工作。

请注意，我刚刚开始学习 NestJS。

main.ts

import { NestFactory } from '@nestjs/core';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setBaseViewsDir(join(__dirname, '..', 'views'));
  app.setViewEngine('hbs');

  await app.listen(3000);
  console.log(`Application is running on: ${await app.getUrl()}`);
}
bootstrap();

应用程序控制器.ts

import { Controller, Get, Render } from '@nestjs/common';

@Controller()
export class AppController {
  @Get()
  @Render('index')
  root() {
    return { message: 'Hello world!' };
  }
}

app.module.ts

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [],
})
export class AppModule {}

tailwind.config.js

module.exports = {
  content: ['./views/*.hbs', './views/**/*.hbs'],
  theme: {
    extend: {},
  },
  plugins: [],
};

webpack-hmr.config.js

const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');

module.exports = function (options, webpack) {
  return {
    ...options,
    //entry: ['webpack/hot/poll?100', options.entry],
    entry: './src/main.ts',
    externals: [
      nodeExternals({
        allowlist: ['webpack/hot/poll?100'],
      }),
    ],
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            { loader: 'style-loader' },
            {
              loader: 'css-loader',
              options: {
                modules: true,
              },
            },
          ],
        },
        {
          test: /\.ts$/,
          use: [{ loader: 'ts-loader' }],
        },
      ],
    },
    plugins: [
      ...options.plugins,
      new webpack.HotModuleReplacementPlugin(),
      new webpack.WatchIgnorePlugin({
        paths: [/\.js$/, /\.d\.ts$/],
      }),
      new RunScriptWebpackPlugin({ name: options.output.filename }),
    ],
  };
};

索引.hbs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>NestJS App With TailwindCSS</title>
    <link rel="stylesheet" href="/assets/css/tailwind.css">
  </head>
  <body>
    <header class="w-full px-8 text-gray-700 bg-white flex">
      <h1 class="bg-slate-200">
      {{ message }}
      </h1>
    </header>
  </body>
</html>

和脚本命令

"start:dev": "nest build --webpack --webpackPath webpack-hmr.config.js --watch",
4

0 回答 0