如何使用几个next.js插件(打字稿和手写笔) [英] How to use several next.js plugins (typescript and stylus)

问题描述

我尝试使用 next-compose-用打字稿和手写笔构建next.js项目插件.

我的next.config.js:

My 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中，我要导入手写笔文件:

In my button.tsx I'm importing stylus file:

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

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

button.styl contains class names I'd like to use in my components but instead getting undefined.

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

I've added declare module '*.styl' to my externals.d.ts and included it in include section of tsconfig.json

我在做什么错了?

UPD::@zeit/next-css遇到相同的问题.

推荐答案

@ zeit/next-typescript 1.0.0已于3天前发布，并引发typescriptLoaderOptions错误:

@zeit/next-typescript 1.0.0 is released 3 days ago, and raise error with 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)

使用此版本，我可以导入手写笔文件.

With this version, I could import stylus file.

• 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插件(打字稿和手写笔)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！