2

我正在使用 nx 创建项目，并且还使用 nx 预设来设置项目，并且我尝试添加一些现成的 UI 库，首先添加 tailwind，然后添加 'daisyui' tailwind 组件。但是我遇到了似乎宏找不到daisyui类的问题。对于正常的顺风类，它工作正常。

如果您需要我在这里缺少的更多上下文和文件配置，请告诉我。谢谢你的所有帮助。

错误：

ERROR in ./src/app/app.tsx
Module build failed (from ../../node_modules/@nrwl/web/src/utils/web-babel-loader.js):
MacroError: path/on/my/machine/mono-repo/apps/appname/src/app/app.tsx:

✕ btn was not found

btn 是 daisyui 组件上的按钮类名。

我如何使用双宏

import styled from "@emotion/styled"
import tw from "twin.macro"
...
const StyledButton = styled.button`
  ${tw`btn btn-primary`}
`

.babelrc

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic",
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ],
    "@emotion/babel-preset-css-prop",
    "@babel/preset-typescript"
  ],
  "plugins": [
    "babel-plugin-transform-inline-environment-variables",
    ["babel-plugin-twin", { "debug": true }],
    "babel-plugin-macros",
    [
      "@emotion/babel-plugin-jsx-pragmatic",
      {
        "export": "jsx",
        "import": "__cssprop",
        "module": "@emotion/react"
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragma": "__cssprop",
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

和 project.json 设置配置

{
  "root": "apps/appname",
  "sourceRoot": "apps/appname/src",
  "projectType": "application",
  "targets": {
    "build": {
      "executor": "@nrwl/web:webpack",
      "outputs": ["{options.outputPath}"],
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",

         ....others config ....
    
        "styles": ["apps/sandbox/src/styles.scss"],
        "scripts": [],
        "webpackConfig": "apps/sandbox/webpackConfig.js"
      },
    ...
    }
    ...
  }

我的 webpackConfig.js

const webpack = require("webpack")
const nrwlConfig = require("@nrwl/react/plugins/webpack.js")
const webpackTailwindConfig = require("./webpack-tailwind.config")

module.exports = (config, env) => {
  config = nrwlConfig(config)
  return {
    ...config,

    ...other config ..
    
    module: {
      ...config.module,
      rules: [...config.module.rules, webpackTailwindConfig.tailwindWebpackRule]
    },
    node: { ...config.node, global: true }
  }
}

webpack-tailwind.config

const tailwindWebpackRule = {
  test: /\.scss$/,
  loader: "postcss-loader"
}

exports.tailwindWebpackRule = tailwindWebpackRule

和导入所有顺风的 style.scss

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

0 回答 0