如何使用几个 next.js 插件(打字稿和手写笔)
Posted
技术标签:
【中文标题】如何使用几个 next.js 插件(打字稿和手写笔)【英文标题】:How to use several next.js plugins (typescript and stylus) 【发布时间】:2018-10-21 23:17:13 【问题描述】:我尝试使用next-compose-plugins 使用打字稿和手写笔构建 next.js 项目。
我的 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,
],
])
在我的button.tsx
我正在导入手写笔文件:
import styles from './button.styl'
console.log(styles) // undefined
button.styl 包含我想在我的组件中使用但获得undefined
的类名。
我已将declare module '*.styl'
添加到我的externals.d.ts
并包含在tsconfig.json
的include
部分中
我做错了什么?
UPD: 遇到 @zeit/next-css
的相同问题。
【问题讨论】:
【参考方案1】:@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/***/nextjs/node_modules/@zeit/next-typescript/index.js:15:11)
有了这个版本,我可以导入手写笔文件了。
next.config.js:删除你的typescriptLoaderOptions
。
我不制作 externals.d.ts
index.tsx:
import styles from './button.styl'
console.log(styles) // 'button-class-name': '_1U60cMSmedjISleJqYp7tU'
export default () =>
return <div>test</div>
【讨论】:
以上是关于如何使用几个 next.js 插件(打字稿和手写笔)的主要内容,如果未能解决你的问题,请参考以下文章