Reactjs Next.js如何修复"；您可能需要适当的加载程序来处理此文件类型；_Reactjs_Webpack_Next.js

Reactjs Next.js如何修复"；您可能需要适当的加载程序来处理此文件类型；

reactjs webpack next.js

Reactjs Next.js如何修复"；您可能需要适当的加载程序来处理此文件类型；,reactjs,webpack,next.js,Reactjs,Webpack,Next.js,我有一个next.js构建，我试图通过node_modules文件夹导入一个css文件在我的react/next组件中，我有： import * as React from 'react' import Head from 'next/head' import './index.styl' import '@theme/crate/dist/index.css?CSSModulesDisable'; import { ThemeProvider } from '@theme/crate';

我有一个next.js构建，我试图通过node_modules文件夹导入一个css文件

在我的react/next组件中，我有：

import * as React from 'react'
import Head from 'next/head'
import './index.styl'
import '@theme/crate/dist/index.css?CSSModulesDisable';
import { ThemeProvider } from '@theme/crate';

export const Layout: React.FunctionComponent = props =>
  <ThemeProvider>
    <div id="Layout">
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        <link href="/static/normalize.css" rel="stylesheet" />
      </Head>
      <main>
        {props.children}
      </main>
    </div>
  </ThemeProvider>

我已尝试将WithTylus添加到module.export，但编译时仍返回错误：

module.exports = withTypescript(
  withStylus({
    stylusLoaderOptions: {
      import: stylusImports,
      use: [
        poststylus([
          autoprefixer()
        ]),
      ],
    },
  },
  withCSS({
    cssLoaderOptions: {
      url: false
    },
    distDir: '../dist',
    cssModules: true
  })),
  {
    webpack(config) {
      if (process.env.ANALYZE) {
        config.plugins.push(
          new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
          })
        );
      }
      return config;
    },
    cssModules: true,
  }
);

我不知道如何从这个库中导入样式。当我导入常规的.css文件时，它们看起来很好，但这一定是在构建过程的不同部分发生的，我假设是下一个

module.exports = withTypescript(
  withStylus({
    stylusLoaderOptions: {
      import: stylusImports,
      use: [
        poststylus([
          autoprefixer()
        ]),
      ],
    },
  },
  withCSS({
    cssLoaderOptions: {
      url: false
    },
    distDir: '../dist',
    cssModules: true
  })),
  {
    webpack(config) {
      if (process.env.ANALYZE) {
        config.plugins.push(
          new BundleAnalyzerPlugin({
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
          })
        );
      }
      return config;
    },
    cssModules: true,
  }
);