NextJS / Webpack не создает зависимости node_module с внутренним css - PullRequest
Новая
       6

NextJS / Webpack не создает зависимости node_module с внутренним css

0 голосов
/ 04 апреля 2019

У меня есть пара проблем с проектом NextJS, которые, я считаю, могут быть решены с помощью хорошо построенной конфигурации веб-пакета (однако я довольно новичок в веб-пакете).

Я использую NextJS 8.0.3 с @zeit/next-css 1.0.2-canary в своем локальном проекте NextJS, и у меня есть пара установленных зависимостей npm, которые используют css (стилизованные повторно используемые компоненты).

Проблема, котораяУ меня есть то, что я не могу построить или экспортировать свое приложение, потому что я получаю ошибку CssSyntax, и если я использую next-plugin-transpile-modules, он будет строить установленные зависимости node_modules, но не будет загружать CSS, потому что он не собираетit.

Это содержимое файла next.config.js, если вы найдете часть веб-пакета, вы заметите, что он просто использует базовый загрузчик css. 

module.exports = withBundleAnalyzer(withCss({
  poweredByHeader: false,
  cssModules: false,
  // assetPrefix: APP_PREFIX, // This actually sets the path for getting static files somewhere else?*
  publicRuntimeConfig: { // Will be available on both server and client
    // pathPrefix: APP_PREFIX,
    cache: {
      static: {
        cdn: 3600,
        browser: 3600
      },
      dynamic: {
        cdn: 600,
        browser: 0
      }
    }
  },
  webpack: (config, { defaultLoaders }) => {

    // Fixes npm packages that depend on `fs` module
    config.module.rules.push({
      test: /\.css$/,
      use: [
        'css-loader',
        'style-loader',
      ]
    });
    config.node = { fs: 'empty' }
    // console.log(config)
    return config
  },
  // bundle analyzer
  analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
  analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
  bundleAnalyzerConfig: {
    server: {
      analyzerMode: 'static',
      reportFilename: '../bundles/server.html'
    },
    browser: {
      analyzerMode: 'static',
      reportFilename: '../bundles/client.html'
    }
  }
}))

Мой самый ближайший вопрос:какой загрузчик веб-пакетов или какую конвейерную конфигурацию я могу использовать, чтобы веб-пакет фактически создавал CSS, импортированный из зависимости jsx, а затем правильно собирал компонент, чтобы его внутренний CSS и, конечно, его функциональность были полностью собраны.

...