nextjs 之旅

文章目录

前言

上一篇介绍了nextjs 的配置，这章主要是引入tailwindcss和antd.

一、Why tailwindcss？

  1. 原子化css 是最近十分火的技术，还有最小的windicss 和unocss,公司最近用的技术也是这个，我个人使用俩个月的评价是，在你有一定css使用基础情况下确实能够提高开发效率。
  2. 这个项目就用这个练练手吧，vue项目再用windicss吧。
  3. 争论虽然也有，但优缺点是看项目的。

二、引入步骤

1. tailwindcss

https://www.nextjs.cn/docs/advanced-features/customizing-postcss-config
next 提供了postcss 开箱即用

  1. 官网教程：https://www.tailwindcss.cn/docs/guides/nextjs
  2. 安装依赖：npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
  3. 创建配置文件：npx tailwindcss init -p
    会创建tailwind.config.js 和 postcss.config.js
    在tailwind.config.js 里面加入
    purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  4. 创建styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. pages/_app.tsx引入styles/tailwind.css：
import "../styles/globals.css";
import "../styles/tailwind./*  */css";
import type { AppProps } from "next/app";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default MyApp;
  1. 验证是否成功
    pages/index.tsx:
import type { NextPage } from "next";
import Head from "next/head";

const Home: NextPage = () => {
  return (
    <div className="">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="flex justify-center text-[red]"> tailwindcss</div>
      </main>
    </div>
  );
};

export default Home;

在这里插入图片描述
ok! 大功告成。

2. scss

官方：
https://www.nextjs.cn/docs/basic-features/built-in-css-support

  1. npm install sass
  2. 需要配置sass 的话在next.config.js中sassOptions（略）
  3. 使用：
    在pages/helloWorld/index.module.scss
.helloWorld {
    .scsstest {
        color: red;
    }
}
  1. pages/helloWorld/index.tsx
import styles from "./index.module.scss";
function About() {
  return (
    <div className={styles.helloWorld}>
      <div className={styles.scsstest}>helloWord</div>
    </div>
  );
}

export default About;
  1. 验证，成功！

3. antd

  1. 安装依赖（npm）

yarn add next-plugin-antd-less
yarn add --dev babel-plugin-import

  1. 新建.babelrc.js
module.exports = {
  presets: [['next/babel']],
  plugins: [['import', { libraryName: 'antd', style: true }]],
};
  1. next.config.js:
/** @type {import('next').NextConfig} */
const withAntdLess = require("next-plugin-antd-less");
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};

module.exports = withAntdLess(nextConfig);
  1. 使用：
    pages/index.tsx:
import type { NextPage } from "next";
import Head from "next/head";
import { Button } from "antd";
const Home: NextPage = () => {
  return (
    <div className="">
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <div className="flex justify-center text-[red]">
          tailwindcss
          <Button type="primary">test Antd</Button>
        </div>
      </main>
    </div>
  );
};
  1. 验证成功

在这里插入图片描述

总结

引入了这三个开发配置。
下一篇开发博客：）

# sass # 前端
Logo
腾讯云开发者社区

腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。

更多推荐

Js分割字符串(单个分割符、多个分割符、正则)

1.单个分割符1.1定义和用法split() 方法用于把一个字符串分割成字符串数组。1.2语法stringObject.split(separator,howmany)参数描述separator必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。howmany可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，

avatar 腾讯云开发者社区

curl

什么是curl命令？curl是利用URL语法在命令行方式下工作的开源文件传输工具。它被广泛应用在Unix、多种Linux发行版中，并且有DOS和Win32、Win64下的移植版本。如何在windows下使用curl命令？第一步： 进入curl下载官网，下载合适的版本，我这里下载的是windows 64位的curl。其中我下载的zip文件。 另外CAB文件也是压缩文件，这...

avatar 腾讯云开发者社区

Zynq7000 USB2.0协议解析及USB控制器详解

USB 2.0规范及控制器文章目录USB 2.0规范及控制器USB2.0Univerasl Serial BusUSBHostUSB总线接口标准总线信号USB拓扑结构数据流模型数据编解码和位填充USB逻辑部件USB时间基准USB 描述符USB设备USB设备供电方式USB设备分层USB设备插入检测机制USB设备状态USB总线枚举USB传输传输类型包(Packet)事务(transaction)传输(

avatar 腾讯云开发者社区