如何使用多个Next.js插件（TypeScript和Stylus）

Question

我尝试使用 next-compose-plugins 来构建带有 TypeScript 和 Stylus 的 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文件中，我正在导入stylus文件：

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

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

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

我做错了什么？

更新：对于 @zeit/next-css 也出现了同样的问题。

- Boris Zagoruiko

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/stackoverflow/nextjs/node_modules/@zeit/next-typescript/index.js:15:11)

通过这个版本，我可以导入stylus文件。

• 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>
}

- set0gut1

Answer 2

考虑使用 next-recompose-plugins 来获取清晰的信息，了解是哪个插件导致了错误。

- IdkMan