如何使用几个 next.js 插件（typescript 和 stylus）

Question

使用打字稿和手写笔构建 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 包含 class 个我想在我的组件中使用的名称，但却得到 undefined.

我已将 declare module '*.styl' 添加到我的 externals.d.ts 并将其包含在 tsconfig.json

的 include 部分

我做错了什么？

UPD： @zeit/next-css.

遇到同样的问题

Answer 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/Whosebug/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 插件（typescript 和 stylus）

How to use several next.js plugins (typescript and stylus)

javascript

reactjs

typescript

stylus

next.js