如何使用几个 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.jsoninclude 部分中

我做错了什么?

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 插件(打字稿和手写笔)的主要内容,如果未能解决你的问题,请参考以下文章

打字稿和 Knex

使用打字稿和模块 css 反应库 [重复]

打字稿和多个类

打字稿和电子出口未定义

打字稿和本机反应的 ForwardRef 错误

打字稿和嵌套解构