Vanilla Extract 使用教程

Vanilla Extract 使用教程

vanilla-extractZero-runtime Stylesheets-in-TypeScript项目地址:https://gitcode.com/gh_mirrors/va/vanilla-extract

Vanilla Extract 是一个零运行时的样式表库，它结合了TypeScript的强大功能，提供了类型安全的主题系统，使变量使用更加直观且易于组织风格。

目录结构及介绍

1. src - 这是你的源代码目录，通常包含以下子目录：

   • styles - 存放 .cts 文件，这是Vanilla Extract中定义CSS类和变量的地方。
   • components 或 views - 用于存放组件或视图的JavaScript/TS文件，它们可以导入和应用styles中的样式。

2. public - 这个目录包含了项目对外提供的静态资源，如HTML索引文件。

3. package.json - 包含项目依赖和脚本的配置文件。

4. tsconfig.json - TypeScript编译器的配置文件。

5. webpack.config.js（或其他构建工具配置）- 配置构建过程，如打包和压缩。

6. README.md - 项目说明和指南。

项目的启动文件介绍

在典型的设置中，启动文件可能是index.tsx或者main.ts，位于src目录下。这个文件是项目的入口点，它通常负责初始化应用程序并渲染到DOM中。例如：

import { applyStyles } from "vanilla-extract";
import { someStyleModule } from "./styles/someStyle.module.cts";

applyStyles(someStyleModule);

// 渲染其他组件
ReactDOM.render(<App />, document.getElementById("root"));

这里，applyStyles函数被用来应用样式模块到页面上，而someStyle.module.cts是从styles目录导入的样式定义。

项目的配置文件介绍

tsconfig.json

此文件用于配置TypeScript编译选项，比如：

{
  "compilerOptions": {
    "jsx": "react",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["dom", "esnext"],
    "types": ["vanilla-extract"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

配置项types添加了对vanilla-extract类型的支持。

webpack.config.js

Webpack配置文件用于设置项目如何构建和打包。示例配置可能包括处理.cts文件的规则：

const path = require('path');
module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.cts$/,
        use: ['@vanilla-extract/css-plugin', 'ts-loader'],
      },
      // 其他加载器...
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

这里，我们使用了@vanilla-extract/css-plugin来处理.cts文件，并通过ts-loader处理TypeScript。

以上就是Vanilla Extract的基本使用和配置介绍。接下来你可以基于这些信息开始编写你的项目了。如果你遇到任何问题，记得查看Vanilla Extract的GitHub仓库以及官方文档以获取更详细的帮助。

vanilla-extractZero-runtime Stylesheets-in-TypeScript项目地址:https://gitcode.com/gh_mirrors/va/vanilla-extract