Question

我有一个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>

在我的next.config.js中，我有以下内容：

const path = require('path');
const withTypescript = require('@zeit/next-typescript');
const withCSS = require('@zeit/next-css');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const withStylus = require('@zeit/next-stylus');
const poststylus = require('poststylus');
const autoprefixer = require('autoprefixer');
const glob = require('glob');

// const stylusImport = path.resolve('./src/stylus');

const stylusImports = glob.sync('./src/stylus/**/*.styl', {
  realpath: true,
});

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

我曾尝试像这样将withStylus添加到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文件时，它们似乎还不错，但是这一定会在构建过程的不同部分中发生，接下来我要假设是什么？

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

0 个答案: