如何使用多个 next.js 插件(typescript 和 stylus)

2024-02-17

我尝试使用打字稿和手写笔构建 next.js 项目下一个撰写插件 https://www.npmjs.com/package/next-compose-plugins.

我的 next.config.js:

const withPlugins = require('next-compose-plugins')
const withTypescript = require('@zeit/next-typescript')
const withStylus = require('@zeit/next-stylus')

module.exports = withPlugins([

  [withTypescript, {
    webpack(config, options) {
      config.node = {
        fs: 'empty',
      }

      return config
    },
    typescriptLoaderOptions: {
      transpileOnly: false,
    }
  }],

  [withStylus, {
    cssModules: true,
  }],

])

In my button.tsx我正在导入手写笔文件:

import styles from './button.styl'
console.log(styles) // undefined

Button.styl 包含我想在组件中使用的类名,但是却得到了undefined.

我已经添加declare module '*.styl' to my externals.d.ts并将其包含在include的部分tsconfig.json

我究竟做错了什么?

UPD:得到同样的问题@zeit/next-css.


@zeit/next-typescript 1.0.0 于 3 天前发布,并使用 typescriptLoaderOptions 引发错误:

Error: `typescriptLoaderOptions` in next.config.js is no longer supported. https://err.sh/next-plugins/typescript-loader-options
    at module.exports (/Users/set0gut1/tmp/stackoverflow/nextjs/node_modules/@zeit/next-typescript/index.js:15:11)

有了这个版本,我可以导入手写笔文件。

  • next.config.js:删除typescriptLoaderOptions来自你的。
  • 我不制作 externals.d.ts
  • 索引.tsx:

import styles from './button.styl'
console.log(styles) // { 'button-class-name': '_1U60cMSmedjISleJqYp7tU' }

export default () => {
    return <div>test</div>
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用多个 next.js 插件(typescript 和 stylus) 的相关文章

  • 使用 moment.js 检查输入日期是否为星期一

    好吧 我想检查日期是否是星期一 例如 var myDate new Date moment myDate DD MM YYYY dayIs monday 在我的国家 一周的第一天是星期一 所以 我真的想检查输入日期是否是一周的开始 我尝试使
  • 如何使用canvas.toDataURL()将画布保存为图像?

    我目前正在构建一个 HTML5 Web 应用程序 Phonegap 本机应用程序 我似乎不知道如何将画布保存为图像canvas toDataURL 有人可以帮我吗 这是代码 有什么问题吗 我的画布被命名为 canvasSignature J
  • React Native:加载图像后应用程序性能不佳

    加载图像似乎没有问题 但是加载完毕后就出现问题了 在我的应用程序中 我在整个游戏中一张一张地加载卡片图像 一旦我加载了 40 张卡片图像 整个应用程序就会变得很慢 它总是发生在第 40 个图像处 当我在第 40 个图像之后继续加载更多卡片图
  • Node.js - console.log 不显示数组中的项目,而是显示 [Object]

    我在注销对象内数组的内容时遇到问题 实际的物体看起来像这样 var stuff accepted item1 item2 rejected response Foo envelope from The sender to new item1
  • 如何在React中的Material-UI选择框中设置默认值?

    我在用选择框 https material ui com demos selects 来自材料用户界面 我想显示默认选择的 选择值 选项 但之后用户无法选择此选项
  • 仅一页 JavaScript 应用程序

    您是否尝试过单页 Web 应用程序 即浏览器仅从服务器 获取 一页 其余部分由客户端 JavaScript 代码处理 此类 应用程序页面 的一个很好的例子是 Gmail 对于更简单的应用程序 例如博客和 CMS 使用这种方法有哪些优点和缺点
  • 在 angular2 中过滤数组

    我正在研究如何在 Angular2 中过滤数据数组 我研究过使用自定义管道 但我觉得这不是我想要的 因为它似乎更适合简单的表示转换 而不是过滤大量数据 数组排列如下 getLogs Array
  • 通过 node-http-proxy 保留基于 cookie 的会话

    我有一个简单的基于 Express 的 Node js Web 服务器 用于开发 JavaScript 应用程序 我将服务器设置为使用 node http proxy 来代理应用程序向在不同域和端口上运行的 Jetty 服务器发出的 API
  • Javascript - 将值从下拉框传递到 Google Maps API

    我正在使用 Google 地图 API 为一家出租车公司创建报价表 目前 用户在 2 个文本框中输入出发点和接载点 API 会计算两点之间的距离以及行程费用 我正在尝试添加两个具有设定位置的下拉框 以便用户可以选择这些位置之一或使用文本框输
  • 如何使用 Antd / Less 和 Sass / CSS 模块配置 Next.js

    我想用Next js https nextjs org 带有 Sass 和 CSS 模块但也想使用蚂蚁设计 https ant design 并希望对较小的建筑尺寸使用 Less 样式 我可以启用 CSS 模块或 Less 加载器 但不能同
  • 是否有任何非轮询方式来检测 DOM 元素的大小或位置何时发生变化?

    很长一段时间以来 我一直在寻找一种方法来检测 DOM 元素的大小或位置何时发生变化 这可能是因为窗口调整了大小 或者因为向该元素添加了新的子元素 或者因为在该元素周围添加了新元素 或者因为 CSS 规则已更改 或者因为用户更改了浏览器的字体
  • 在d3.js中将2D形状转换为3D,并根据ANGULAR中的值调整高度

    我正在使用 d3 js v6 创建以下 2D 图表表示的 3D 图表 这个圆圈中有多个正方形 每个正方形都根据值分配了一种颜色 值越大 正方形越暗 现在我想将其转换为 3D 形状 其中当值变高时 只有特定正方形的高度会增加 因此结果在某种程
  • Typeahead.js substringMatcher 函数说明

    我只是在做一些研究Typeahead js这是一个非常酷的图书馆 感谢文档 我已经成功地获得了一个基本的示例 该文档也非常好 但是我试图弄清楚以下代码块实际上在做什么 var substringMatcher function strs r
  • IE11不监听MSFullscreenChange事件

    我正在尝试使用 Bigscreen js 在 IE11 中使用全屏 但 IE11 不监听 MS FullscreenChange 事件 document addEventListener MSFullscreenChange functio
  • 单击关闭按钮后不显示 Google 一键登录 UI

    我正在尝试按照本指南使新的谷歌一键登录工作 https developers google com identity one tap web https developers google com identity one tap web
  • 查询为空 Node Js Sequelize

    我正在尝试更新 Node js 应用程序中的数据 我和邮递员测试过 我的开发步骤是 从数据库 MySQL 获取ID为10的数据进行更新 gt gt 未处理的拒绝SequelizeDatabaseError 查询为空 我认识到 我使用了错误的
  • Nodejs mysql 获取正确的时间戳格式

    我在用着mysqljs https github com mysqljs mysql得到结果后sql我变得不同TimeStamp格式如下 created at Sat Jul 16 2016 23 52 54 GMT 0430 IRDT 但
  • 使用 Flask/WTForms 和 React 进行 CSRF 保护

    有没有人成功地为使用 React 作为受控组件 提交到 Flask 后端 最好使用 WTForms 的表单实现了 CSRF 保护 我看过很多部分答案 其中一个是关于 Django 的 但找不到任何关于 Flask 的明确答案 我的大问题似乎
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 用于 C# XNA 的 Javascript(或类似)游戏脚本

    最近我准备用 XNA C 开发另一个游戏 上次我在 XNA C 中开发游戏时 遇到了必须向游戏中添加地图和可自定义数据的问题 每次我想添加新内容或更改游戏角色的某些值或其他内容时 我都必须重建整个游戏或其他内容 这可能需要相当长的时间 有没

随机推荐

  • 如何使用 yii2 -bootstrap 扩展将模态添加到 yii2 中的导航栏?

    我正在尝试将模态放在我的 yii2 项目的导航栏中 我正在使用 yii2 bootstrap 扩展 我的导航代码 NavBar begin brandLabel gt My Company brandUrl gt Yii app gt ho
  • Android Studio 不断拒绝解析 com.android.support:appcompat-v7:29.0.1

    我已经提到过this http ttps stackoverflow com questions 52997370 线程 但它不能解决我的问题 我不断收到错误 ERROR Failed to resolve com android supp
  • 如何从 Jenkins 2.0 管道脚本读取属性文件

    我正在尝试编写一个管道脚本与 Jenkins 2 0 一起使用来复制我们现有的构建 这个原始构建使用 envInject 插件来读取 Java 属性文件 但我看不到如何从管道 Groovy 脚本中执行此操作 我用 Google 搜索并找到了
  • 标签和类替换标题 (

    ,

    ...) 标签

    我希望将标签从所见即所得编辑器替换为 目前我正在使用以下代码来实现此目的 content preg replace

  • jQuery的load函数在本地不起作用

    当窗口宽度小于 600px 时 我必须在现有 div 中加载 HTML 文件 代码是 div div 我已经在我的网站上测试了这段代码并且它可以工作 但也许我做错了什么才能使其在本地工作 有没有理由load函数不能在本地运行
  • 在 Eclipse RCP 应用程序中在哪里存储“全局”数据?

    我是 Eclipse RCP 的初学者 我正在尝试为自己构建一个应用程序来尝试一下 我对如何实际处理模型对象感到困惑 我能找到的例子都不能解决我遇到的问题 所以我怀疑我的处理方式是错误的 假设我需要使用保存经过身份验证的用户信息的类来初始化
  • 如何用IPC::Open2过滤大量数据?

    我的任务是使用外部实用程序 addr2line 从 perl 脚本中过滤一些数据 数据量相当大 我需要打印大量数据stdin程序并读回大量数据 来自stdout程序到我的脚本中 现在我这样做IPC Open2 但我不混合阅读和写作 这合法吗
  • 设置控件Parent属性和使用Controls.Add()之间的区别?

    更具体地说 这些陈述是 ownerControl GroupBox1 Controls Remove childControl ownerControl Controls Add childControl 相当于 childControl
  • 在本地主机上托管 git 服务器

    我的公司没有中央 git 服务器 也不允许我使用 BitBucket 等 无论如何我可以使用我的本地主机作为remote 编辑 我在 Windows 机器上 本地目录的工作方式与远程存储库 URL 类似 因此只要您是唯一使用该存储库的人 基
  • shell 脚本错误期待“do”

    bin sh while true do echo WTF done 这给出了语法错误 语法错误 意外的文件结尾 需要 do 我也尝试过 bin sh while do echo WTF done 我怀疑行结尾 Try hexdump C
  • iOS 模拟器应用程序的终端命令行调试?

    是否可以在 Mac OS X 下的终端命令行中使用 GDB 或 LLDB 来调试在 iOS 模拟器上运行的应用程序 例如 不是从 Xcode 的 GUI 或控制台内部 而是使用外部命令行或进程 如果是这样 怎么办 您需要在模拟器的 Spri
  • MVC-错误消息

    我正在创建 MVC Web 应用程序 我应该在 MVC 模型 视图 控制器 的哪一部分保存错误消息 这些消息可能会出现在出现问题的地方并且用户应该阅读它们 目前情况 Model function f data error Error mes
  • 为 C# MVC ASP.NET 应用程序创建的默认数据库在哪里?

    我在引导程序上使用登录 注册脚本安装了新的 MVC ASP NET 应用程序 它工作正常 但我不知道该应用程序的默认数据库在哪里 我的 App Data 文件夹是空的 有人可以告诉我表单注册的数据保存在哪里吗 这将存储在 Visual St
  • 何时在 Ansible 中使用 from_json 过滤器?

    我什么时候应该使用from json filter https docs ansible com ansible playbooks filters html filters for formatting data在安西布尔 我发现使用它有
  • Mod 重写查询参数验证和阻止也请求 url 阻止

    在我的网站上 只允许很少的查询参数 但是 一些扫描仪或黑客试图使用我的 php 应用程序不支持的唯一参数访问 url 我可以通过验证在 php 应用程序级别阻止它们 GET参数 但我的服务器正在加载 所以如果参数无效 我想显示 403 查询
  • 如何为 flex: 0 0 25% 的弹性项目添加 1px 边距?

    我正在使用 Flexbox 测试几种不同的布局 但遇到以下问题 我有一个设置了弹性项目的图片库flex 0 0 25 我想给它们添加 1px 边距 因为 1 太大了 所以我想知道在这种情况下我应该做什么 我附上下面的例子 foto cont
  • 使用 sshj java 库在我的 Amazon EC2 机器上执行“sudo”命令

    我正在尝试使用 SSHJ 库在我的 Amazon EC2 计算机上执行 sudo 命令 https github com shikhar sshj https github com shikhar sshj 不幸的是 我没有收到服务器的任何
  • 使用 crypto-js 和十六进制编码对字符串进行加密,使其 url 友好

    我在用crypto js by brix https github com brix crypto js 我下面有这个函数来处理纯文本的加密 import CryptoJS from crypto js import AES from cr
  • Python 方法 *参数* 的双下划线

    我知道双下划线对于 Python 类属性 方法意味着什么 但是它对于方法参数意味着什么吗 看起来您无法将以双下划线开头的参数传递给方法 这很令人困惑 因为您可以对正常功能执行此操作 考虑这个脚本 def egg a None return
  • 如何使用多个 next.js 插件(typescript 和 stylus)

    我尝试使用打字稿和手写笔构建 next js 项目下一个撰写插件 https www npmjs com package next compose plugins 我的 next config js const withPlugins re