NextJSによるAnt設計の使用

Days 1 : nextjsを学ぶ新しいプロジェクトを始めました.AntデザインでNextJSプロジェクトをセットアップしようとするとき、今日、私の最初のハードルに直面しました.NextJSを使用したAntのデザインを使用すると、かなりまっすぐになりましたが、Antデザインのカスタム変数を使用しようとしたときには、物事がトリッキーになりました.
新しいNextJSプロジェクトを作成することができます

yarn create next-app app-name

OR

npx create-next-app app-name

NextJSプロジェクトでは、Antのデザインをインストールします

yarn add antd

OR

npm install --save antd

新しいファイルを作成します.プロジェクトのルートのスタイルフォルダーでは以下です.クリエイトアstyles フォルダを既に使用していない場合.antd.less すべてのカスタム変数が行くファイルです
ANDless

@import "~antd/dist/antd.less";

@primary-color: #000; // primary color for all components
@link-color: #1890ff; // link color
@success-color: #52c41a; // success state color
@warning-color: #faad14; // warning state color
@error-color: #f5222d; // error state color
@font-size-base: 14px; // major text font size
@heading-color: rgba(0, 0, 0, 0.85); // heading text color
@text-color: rgba(0, 0, 0, 0.65); // major text color
@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 4px; // major border radius
@border-color-base: #d9d9d9; // major border color
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers

あなたが望むようにこれらの変数をカスタマイズできます.詳細については、Antデザインのカスタマイズドキュメントをご覧ください.
にpages ディレクトリと呼ばれる新しいファイルを作成する_app.js 下記の内容で
アプリ.js

import React from "react";
import App from "next/app";

import "../styles/antd.less";

class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;

    return <Component {...pageProps} />;
  }
}

export default MyApp;

他のグローバルなスタイルをここでインポートすることもできます
今、あなたのカスタム変数は何の効果もありません.そのためには、これらのパッケージをインストールする必要があります.

yarn add @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

OR

npm install --save @zeit/next-css @zeit/next-less @zeit/next-sass babel-plugin-import less

これで、変数のカスタムnextjs設定を作成する必要があります
次.設定.js

const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

const isProd = process.env.NODE_ENV === "production";

// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
  require.extensions[".less"] = (file) => {};
}

module.exports = withCSS({
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    })
  ),
});

この設定を使用すると、プロジェクト内のより小さい、SASS、CSSモジュールを使用できます.Antデザインのカスタム変数は動作します

接続する
あなたはdevで私に従うことができるか、私とつながっています.私の購読newsletter