Stylable 开源项目安装与使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00012/article/details/138840255

Stylable 开源项目安装与使用指南

stylable Stylable - CSS for components 项目地址: https://gitcode.com/gh_mirrors/st/stylable

Stylable 是一个专为组件设计的 CSS 系统，它允许你创建可重用且高性能的组件，而无需牺牲样式灵活性。本指南将带你了解其基本的项目结构、启动文件以及配置文件，帮助你快速上手。

1. 项目目录结构及介绍

Stylable 的仓库是一个使用 Lerna 管理的单体仓库（monorepo），包含多个相关包来构建完整的生态系统。以下是一些核心的目录结构和关键组件：

core 和 @stylable/core: 核心CSS预处理器逻辑。
runtime 和 @stylable/runtime: 运行时浏览器代码优化器。
optimizer 和 @stylable/optimizer: 生产环境模式下的优化工具。
module-utils 和 @stylable/module-utils: 创建Stylable CommonJS模块的工具。
cli 和 @stylable/cli: 用于管理项目中Stylable样式的命令行工具。
create-stylable-app: 应用生成器，提供快速起始模板。
webpack-plugin 和 @stylable/webpack-plugin: 用于webpack集成的插件。

以及其他工具、测试套件、和对于不同框架的集成支持包。每个子包都有自己的责任领域，共同协作以支持Stylable的整个生命周期。

2. 项目的启动文件介绍

在Stylable项目中，并没有传统意义上的单一“启动文件”，因为它依赖于不同的上下文和用途。对于新项目，如果你使用 create-stylable-app 初始化，通常会有一个index.js或main.js作为应用入口点，并在webpack配置中指定处理Stylable样式。若手动集成到现有项目，则需关注webpack配置文件中的Stylable插件配置部分，比如 webpack.config.js 或相应的配置文件，那里是控制项目启动时如何编译Stylable样式的关键所在。

3. 项目的配置文件介绍

主要配置文件

webpack.config.js: 对于基于webpack的项目，此文件是至关重要的，它包含了对Stylable的支持配置。你需要添加Stylable的webpack插件和对应的加载器规则，以确保Stylable文件能够正确地被编译成CSS。
.stylablerc (可选): 虽然不是项目必备，但可以通过创建这个文件来自定义Stylable的行为，提供额外的配置选项来影响编译过程，例如设置前缀、改变默认行为等。
package.json: 包含了项目的元数据以及脚本命令，如 "start": "webpack-dev-server"，用于启动开发服务器，以及可能的Stylable特定脚本。
lerna.json: 在单体仓库环境下，它定义了Lerna的工作方式，包括版本策略和工作空间信息。这不是直接与项目启动相关，但对于维护多包结构的仓库至关重要。