微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

在显示示例 <docs></docs> 中为 vue-styleguidist 配置 @nuxt/tailwind

如何解决在显示示例 <docs></docs> 中为 vue-styleguidist 配置 @nuxt/tailwind

我需要在 *.vue 文件项目中显示示例,我使用 Nuxt 和 @nuxtjs/tailwindcss 当使用标签加载时,我的示例样式不会加载。 并在检查中显示

image

我需要为 vue-styleguid.config 配置我的 nuxtjs/tailwindcss。 请让我解决此问题的配置。 这是我的 styleguide.config.js

// eslint-disable-next-line no-unused-vars
const { resolve } = require("path")

const { getWebpackConfig } = require("nuxt")
const FILTERED_PLUGINS = [
  "WebpackBarPlugin","VueSSRClientPlugin","HotModuleReplacementPlugin","FriendlyErrorsWebpackPlugin","HtmlWebpackPlugin"
]

const docSiteUrl =
  process.env.DEPLOY_PRIME_URL || "https://vue-styleguidist.github.io"

/** @type import("vue-styleguidist").Config */
module.exports = async () => {
  // get the webpack config directly from nuxt
  const nuxtWebpackConfig = await getWebpackConfig("client",{
    for: "dev"
  })

  const webpackConfig = {
    module: {
      rules: [
        ...nuxtWebpackConfig.module.rules.filter(
          // remove the eslint-loader
          (a) => a.loader !== "eslint-loader"
        )
      ]
    },resolve: { ...nuxtWebpackConfig.resolve },plugins: [
      ...nuxtWebpackConfig.plugins.filter(
        // And some other plugins that Could conflcit with ours
        (p) => !FILTERED_PLUGINS.includes(p.constructor.name)
      )
    ]
  }

  return {
    components: "components/**/*.vue",ribbon: {
      text: "Back to examples",url: `${docSiteUrl}/Examples.html`
    },webpackConfig,usageMode: "expand",styleguideDir: "dist"
  }
}

我需要在顶级配置中添加@nuxt/tailwind。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。