Next.js как исправить «Возможно, вам нужен соответствующий загрузчик для обработки этого типа файлов». - PullRequest
Новая
       22

Next.js как исправить «Возможно, вам нужен соответствующий загрузчик для обработки этого типа файлов».

0 голосов
/ 27 июня 2019

У меня есть сборка next.js, в которой я пытаюсь импортировать файл css через папку node_modules.

В моей реакции / следующем компоненте у меня есть: 

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, они кажутся нормальными, но это должно происходить в другой части процесса компоновки со следующим, я полагаю?

...