我尝试使用 next-compose-plugins 使用 typescript 和手写笔构建 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
并将其包含在 include
部分 tsconfig.json
我做错了什么?
UPD: @zeit/next-css
遇到同样的问题。
最佳答案
@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)
有了这个版本,我可以导入手写笔文件。
- 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>
}
关于javascript - 如何使用几个 next.js 插件(typescript 和 stylus),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50294005/