CSS 开发方案

Modern.js 内置多种常用的 CSS 开发方案,包括 Less / Sass / Stylus 预处理器、PostCSS、CSS Modules、CSS-in-JS 和 Tailwind CSS。

使用 Less、Sass 和 Stylus

Modern.js 内置了社区流行的 CSS 预处理器,包括 Less 和 Sass。

默认情况下,你不需要对 Less 和 Sass 进行任何配置。如果你有自定义 loader 配置的需求,可以通过配置 tools.lesstools.sass 来进行设置。

你也可以在 Modern.js 中使用 Stylus,只需要安装 Modern.js Builder 提供的 Stylus 插件即可,使用方式请参考 Stylus 插件

使用 PostCSS

Modern.js 内置了 PostCSS 来转换 CSS 代码。

请阅读 Modern.js Builder - 使用 PostCSS 了解更多用法。

使用 CSS Modules

请阅读 使用 CSS Modules 章节来了解 CSS Modules 的完整用法。

使用 CSS-in-JS

CSS-in-JS 是一种可以将 CSS 样式写在 JS 文件里的技术。

Modern.js 集成了社区常用的 CSS-in-JS 实现库 styled-components,它使用 JavaScript 的新特性 Tagged template 编写组件的 CSS 样式。可以直接从 @modern-js/runtime/styled 引入 styled-components 的 API 进行使用。

当需要编写一个内部字体为红色的 div 组件时,可以如下实现:

import styled from '@modern-js/runtime/styled';

const RedDiv = styled.div`
  color: red;
`;

当需要根据组件的 props 动态设置组件样式时,例如 props 的属性 primarytrue 时,按钮的颜色为白色,其他情况为红色,实现代码如下:

import styled from '@modern-js/runtime/styled';

const Button = styled.button`
  color: ${props => (props.primary ? 'white' : 'red')};
  font-size: 1em;
`;

关于 styled-components 的更多用法,请参考 styled-components 官网

Modern.js 内部集成了 Babel 的 babel-plugin-styled-components 插件,你可以通过 tools.styledComponents 对插件进行配置。

提示

如果需要使用 styled-jsxEmotion等其他 CSS-in-JS 库,需要先安装对应库的依赖。具体使用方式请参考对应库的官网。

使用 Tailwind CSS

Tailwind CSS 是一个以 Utility Class 为基础的 CSS 框架和设计系统,可以快速地为组件添加常用样式,同时支持主题样式的灵活扩展。在 Modern.js 中使用 Tailwind CSS,只需要在项目根目录下执行 pnpm run new 并开启。

按照如下进行选择:

? 请选择你想要的操作 启用可选功能
? 启用可选功能 启用 Tailwind CSS 支持

modern.config.ts 中注册 Tailwind 插件:

modern.config.ts
import tailwindcssPlugin from '@modern-js/plugin-tailwindcss';

export default defineConfig({
  plugins: [..., tailwindcssPlugin()],
});

使用时在入口的根组件(如 src/App.jsx)添加如下代码:

import 'tailwindcss/base.css';
import 'tailwindcss/components.css';
import 'tailwindcss/utilities.css';

然后即可在各个组件中使用 Tailwind CSS 提供的 Utility Class 了:

const App = () => (
  <div className="h-12 w-48">
    <p className="text-xl font-medium text-black">hello world</p>
  </div>
);

补充信息

根据需求不同,你可以选择性的导入 Tailwind CSS 提供的 CSS 文件。由于使用 @tailwind 与直接导入 CSS 文件的作用等价,因此关于 Tailwind CSS 提供的 CSS 文件的用途,可以参考 @tailwind 的使用 文档中注释里的内容。

Tailwind CSS 版本

Modern.js 同时支持 Tailwind CSS v2 和 v3 版本,框架会识别项目 package.json 中的 tailwindcss 依赖版本,并启用相应的配置。默认情况下,我们会为你安装 Tailwind CSS v3 版本。

如果你的项目仍在使用 Tailwind CSS v2,我们推荐你升级到 v3 以支持 JIT 等能力。关于 Tailwind CSS v2 与 v3 版本之间的差异,请参考以下文章:

浏览器兼容性

Tailwind CSS v2 和 v3 均不支持 IE 11 浏览器,相关背景请参考:

如果你在 IE 11 浏览器上使用 Tailwind CSS,可能会出现部分样式不可用的现象,请谨慎使用。

Theme 配置

当需要自定义 Tailwind CSS 的 theme 配置的时候,可以在配置 source.designSystem 中修改,例如,颜色主题中增加一个 primary

modern.config.ts
export default defineConfig({
  source: {
    designSystem: {
      extend: {
        colors: {
          primary: '#5c6ac4',
        },
      },
    },
  },
});

当需要对 Tailwind CSS 做 theme 以外的其他特殊配置时,可以在 tools.tailwindcss 中配置,例如设置 variants

modern.config.ts
export default defineConfig({
  tools: {
    tailwindcss: {
      variants: {
        extend: {
          backgroundColor: ['active'],
        },
      },
    },
  },
});

当你为项目配置 Tailwind CSS 的时候,source.designSystemtools.tailwindcss 这两个配置的组合等价于单独配置了一个 tailwindcss.config.js 文件。其中 source.designSystem 等效于 Tailwind CSS 的 theme 配置。

,