Remix如何支持原生 CSS方法详解

目录
  • Remix CSS 语法
  • links 函数写法
  • links 函数层级
  • links 函数中 css 媒体查询
    • 第三方 css
  • import 语法
  • 小结

Remix CSS 语法

Remix 是一个多页面的框架,对页面的原生 CSS 的支持分为两大类型:

  • 使用 links 函数,转换成 link 标签支持 css
  • 使用 javascript import 语法支持 css ,但是最终也会成为 link 标签
  • 驼峰命名法
.PrimaryButton {
  /* ... */
}
  • html 属性法
[data-primary-button] {
  /* ... */
}

links 函数写法

  • rel
  • href
  • media
import type { LinksFunction } from "@remix-run/node"; // or cloudflare/deno
import globalStyleHref from '~/styles/globalStyleHref'
export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: globalStyleHref,
      media: "(min-width: 1280px)",
    },
  ];
};

links 函数层级

  • root 级, 添加全局样式
  • 定义全局样式
  • 在 root.tsx links 函数中添加全局样式
import globalStylesHref from '~/styles/global.css'
export const links: LinksFunction = () => [
  { rel: "stylesheet" , href: globalStylesHref },
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];
  • route 级, 添加路由级样式
  • 定义 route 级样式
  • 在 routes/xxx.tsx links 函数中引入样式
import ArticleStylesHref from "~/styles/article.css";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: ArticleStylesHref },
];
  • nest route 级,添加嵌套路由样式
  • 理解嵌套路由(配合 <Outlet /> 使用)
  • 定义 nest route 级样式
  • 在 routes/xxx.yyy.tsx links 函数中引入 nest 样式
import articleDetailStylesHref from "~/styles/article.detail.css";
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: articleDetailStylesHref },
];

这以文章和文章详情作为嵌套路由,方便理解。

links 函数中 css 媒体查询

  • media 属性, 一般用于断点,暗黑模式等
export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: mainStyles,
    },
    {
      rel: "stylesheet",
      href: largeStyles,
      media: "(min-width: 1024px)",
    },
    {
      rel: "stylesheet",
      href: xlStyles,
      media: "(min-width: 1280px)",
    }
  ];
};
import ArticleStylesHref from "~/styles/article.css";
import Article1024StylesHref from '~/styles/article-1024.css'
import Article1208StylesHref from '~/styles/article-1280.css'
export const links: LinksFunction = () => [
  { rel: "stylesheet", href: ArticleStylesHref },
  { rel: "stylesheet", href: Article1024StylesHref, media: "(min-width: 1024px)", },
  { rel: "stylesheet", href: Article1208StylesHref, media: "(min-width: 1280px)" },
];

第三方 css

href 属性直接访问第三方地址:

export const links: LinksFunction = () => {
  return [
    {
      rel: "stylesheet",
      href: "https://unpkg.com/modern-css-reset@1.4.0/dist/reset.min.css",
    },
  ];
};

import 语法

import 语法需要配合 remix 提供的 @remix-run/css-bundle 包使用:

import { cssBundleHref } from "@remix-run/css-bundle";
export const links: LinksFunction = () => [
  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
];

此时就可以直接使用 import './xxx.css' 文件,这与 webpack css-loader 提供的能力相当了。

小结

  • remix 对 css 支持已经比较成熟,市面上主流的 css 方案都正式在 v1.16.0 版本中稳定支持。
  • remix 通过 links 韩式支持原生 css 的 link 比标签,设计上有一一对应的关系。
  • 同时也支持了使用 import 语法支持,本质是主动的加上 link 标签
  • 同时支持不同层级的 css 初次使用时,需要理解 root/route/nest-route 的内容
  • remix links 页支持了 css 的媒体查询功能,能在 links 中定义媒体查询断点

以上就是Remix如何支持原生 CSS的详细内容,更多关于Remix支持原生 CSS的资料请关注我们其它相关文章!

(0)

相关推荐

  • Remix 路由模块输出对象handle函数

    目录 正文 在哪里可以定义 handle? 在根路由定义 在页面 _index 路由中与 useMatch 一起 match 数组 使用场景 正文 Remix handle 函数是一个有用的对外输出的 Route 模块对象,用于暴露特定的数据 match 对象,它们经常在一起使用. 当前 Remix 版本:1.15.0 在哪里可以定义 handle? root 根组件 路由页面 在根路由定义 import { /.../ } from "@remix-run/react"; // 根路

  • Remix路由模块输出对象loader函数详解

    目录 主要内容 loader 函数定义 loader 函数配合 useLoaderData 一起使用 loader 函数返回值 loader 函数的类型 loader 函数中获取 params loader 函数中处理 headers loader 函数上下文 loader 中重定向到 错误处理 在页面中的表现 loader 作为纯 api 输出数据使用 小结 主要内容 Remix loader 函数是一个获取当前页面页面数据的函数,经常与 useLoaderData 一起配合使用 当前 Rem

  • 全栈轻量级搭配之Remix Prisma Sqlite使用分析

    目录 一.为什么是 Remix/Prisma/Sqlite ? 二.Prisma 命令提前看 三.在 Remix 中添加 Sqlite 和 Prisma 的流程如下: 1.安装依赖 2.用 sqlite 初始化 prisma 3.在 Schema 文件中添加模型 4.生成客户端代码 5.使用迁移命令 6.在 studio 中查看 7.在 Remix 中使用 ①. 对外暴露 db ②. 抽象模型层 ③. 在 action/loader 中使用模型层操作数据库 ④. 额外的 seed 初始化 四.流

  • Remix后台开发之remix-antd-admin配置过程

    目录 Remix Antd Admin Project experience URL Current Remix Version 设计动机 核心包 国际化 图表库 裁剪工具 Remix 优点 用法 格式化工具 支持 Remix Antd Admin 一款基于 Remix / Antd / Echarts / Styled-components 的管理系统,可快速进行项目初始化.(本项目偏前端) Project experience URL 访问地址(注意部署在 vercel):remix-ant

  • Remix 后台桌面开发electron-remix-antd-admin

    目录 Remix Antd Admin Electron 项目地址 当前 Remix 版本 设计动机 Core Packages 增加左面主文件 增加 Remix 配置文件 增加 nodemon.json 核心包 国际化 图表库 裁剪工具 优点 npmrc config 使用方法 格式化工具 构建 支持 Remix Antd Admin Electron 基于 Electron/Remix/Antd/Echarts/Styled-components 的管理系统,能够快速初始化项目. 项目地址

  • Remix中mdx table不支持表格解决

    目录 remix 配置文件中配置 mdx 属性 添加插件 remark-gfm remix 配置文件中配置 mdx 属性 remix 中支持 md/mdx 语法,但是 Remix 语法没有内置对 markdown 表格的支持. mdx 配置在 Remix 文档很不明显,从 remix 的配置文件的 .d.ts 文件. export interface AppConfig { mdx?: RemixMdxConfig | RemixMdxConfigFunction; } export inter

  • mysql/Java服务端对emoji的支持与问题解决方法详解

    本文实例讲述了mysql Java服务端对emoji的支持与问题解决方法.分享给大家供大家参考,具体如下: 问题描述 将底层抓取的微博数据存入mysql,有些数据存入失败,查看Tomcat后,核心错误信息如下: // 抛出字符集不支持的异常 sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x97\xF0\x9F...' for column 'CONTENT' at row 1 原因分析 MYSQL 5.5 之前, utf8 编码只

  • 基于原生ajax与封装的ajax使用方法(详解)

    当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.jo

  • 原生js封装的一些jquery方法(详解)

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return false; if (ele.classList) { return ele.classList.contains(cls); } else { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } } addCl

  • JavaScript实现网页带动画返回顶部的方法详解

    服务器由阿里云换到了腾讯云,我的代码之前一直都是托管在git上的,但是搬家的时候,可能是着急了,之前有些新加的文件没有托管到git上,所以,就丢了. 不过无所谓了,可以重新写嘛. 之前博客的回到顶部功能是请之前的一位前端的同事帮忙写的,这次打算自己尝试一下. 返回顶部无非就是锚点. 第一个版本: <body style="height:2000px;"> <div id="topAnchor"></div> <a href=

  • Asp.net MVC scheduler的实现方法详解

    Asp.net MVC scheduler的实现方法详解 本例使用了fullcalendar js : https://fullcalendar.io/ 1. view : @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section PageContent{ <style> .modal-backdrop { z-index: 9; } </sty

  • 优化Tomcat配置(内存、并发、缓存等方面)方法详解

    Tomcat有很多方面,我从内存.并发.缓存等方面介绍优化方法. 一.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_OPTS参数说明 server 启用jdk 的 server 版: -Xms java虚拟机初始化时的最小内存: -Xmx java虚拟机可使用的最大内存: -XX: PermSize 内存永久保留区域 -XX:MaxPermSize 内存最

  • python爬虫之BeautifulSoup 使用select方法详解

    本文介绍了python爬虫之BeautifulSoup 使用select方法详解 ,分享给大家.具体如下: <html><head><title>The Dormouse's story</title></head> <body> <p class="title" name="dromouse"><b>The Dormouse's story</b></

  • Java Spring MVC 上传下载文件配置及controller方法详解

    下载: 1.在spring-mvc中配置(用于100M以下的文件下载) <bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter"> <property name="messageConverters"> <list> <!--配置下载返回类型--> <bean class="or

  • Android中gson、jsonobject解析JSON的方法详解

    JSON的定义: 一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性.业内主流技术为其提供了完整的解决方案(有点类似于正则表达式 ,获得了当今大部分语言的支持),从而可以在不同平台间进行数据交换.JSON采用兼容性很高的文本格式,同时也具备类似于C语言体系的行为. JSON对象: JSON中对象(Object)以"{"开始, 以"}"结束. 对象中的每一个item都是一个key-value对, 表现为"key:value"的形式, ke

  • js基础之DOM中元素对象的属性方法详解

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    元素节点 所有 HTML 属性都是    属性节点 文本插入到 HTML 元素是    文本节点 注释是    注释节点. 最基本的节点类型是Node类型,其他所有类型都继承自Node,DOM操作往往是js中开销最大的部分,因而NodeList导致的问题最多.要注意:NodeList是'动态的',

随机推荐