郴州58网站,wordpress改网页电话,电脑做网站用word,南京h5网站开发不同于 nuxt #xff0c;next 的样式绝大部分都需要手动导入。
全局样式
使用 sass 先安装 npm i sass -D 。
我们可以定义一个 styles 文件#xff0c;存放全局样式。 variables.scss
$fs30: 30px;mixin border() {border: 1px solid red;
}main.scss
use ./variables …不同于 nuxt next 的样式绝大部分都需要手动导入。
全局样式
使用 sass 先安装 npm i sass -D 。
我们可以定义一个 styles 文件存放全局样式。 variables.scss
$fs30: 30px;mixin border() {border: 1px solid red;
}
main.scss
use ./variables as *;$fsColor: lightgreen;
.global-style {color: $fsColor;include border();
}globals.css
.global-border {border: 1px solid black;
}import MyButton from /components/my-button;
import Head from next/head;
import ../styles/globals.css
import /styles/main.scssexport default function Home() {return (Headtitle我是title/titlemeta namedescription contentGenerated by create next app/meta nameviewport contentwidthdevice-width, initial-scale1/link relicon href/favicon.ico//Headdiv classNameglobal-styleWelcome to my website! 你好/divMyButton//);
}
局部样式
可以定义一个该文件夹下的 xxx.module.css 文件
.about-color {color: hotpink;
}import React from react;
import Link from next/link;
import styles from ./page.module.cssfunction Page(props) {return (div className{styles[about-color]}我是about页/divLink href/ go to home/Link/);
}export default Page;同时 支持从CSS module 文件导出export的 Sass 变量。
app/variables.module.scss
$primary-color: #64ff00;:export {primaryColor: $primary-color;
}app/page.jsx
import variables from ./variables.module.scssexport default function Page() {return h1 style{{ color: variables.primaryColor }}Hello, Next.js!/h1
}所以从上面我们可以看出当添加了 module 后缀的 css 将被模块化可以直接以 一个变量 styles 的形式导入使用否则只能使用常规的 导入 css 文件的导入样式。
