Как я могу использовать nextjs / router с таблицами стилей - PullRequest
Новая
       130

Как я могу использовать nextjs / router с таблицами стилей

0 голосов
/ 02 мая 2020

Я добавил пакет antd, и моя конфигурация Nextjs выглядит следующим образом: 

require('dotenv').config()
const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const lessToJS = require("less-vars-to-js");
const fs = require("fs");
const path = require("path");

// Where your antd-custom.less file lives
const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, "./assets/antd-custom.less"), "utf8")
);

module.exports = withSass({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess({
    lessLoaderOptions: {
      javascriptEnabled: true,
      modifyVars: themeVariables, // make your antd custom effective
    },
    webpack: (config, { isServer }) => {
      if (isServer) {
        const antStyles = /antd\/.*?\/style.*?/;
        const origExternals = [...config.externals];
        config.externals = [
          (context, request, callback) => {
            if (request.match(antStyles)) return callback();
            if (typeof origExternals[0] === "function") {
              origExternals[0](context, request, callback);
            } else {
              callback();
            }
          },
          ...(typeof origExternals[0] === "function" ? [] : origExternals),
        ];

        config.module.rules.unshift({
          test: antStyles,
          use: "null-loader",
        });
      }
      return config;
    },
    publicRuntimeConfig: {
      // Will be available on both server and client
      BASE_URL: process.env.BASE_URL,
    },
  }),
});

на каждой странице я создаю файл tsx и файл sass, подобный этому, в папке pagename.module.scss

, но когда я использую next/router для pu sh новый URL, я получаю следующую ошибку в моей консоли:

enter image description here

Я не понимаю проблемы. Я даже использую динамический импорт c, чтобы все компоненты отображались только на стороне клиента, чтобы не зависеть от стороны сервера.

Другая проблема, которую я получил, заключается в том, что мой глобальный файл sass в папке стилей добавлен сверху из окончательного файла css затем добавляется таблица стилей antd, что вынуждает меня добавить !important ко всему моему глобальному стилю, чтобы сделать их эффективными. Как я могу их решить?

...