Stylable 项目教程

Stylable 项目教程

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

1、项目介绍

Stylable 是一个为组件化开发设计的 CSS 预处理器，旨在解决传统 CSS 在大型项目中遇到的问题，如样式冲突、难以维护等。Stylable 通过为每个组件创建独立的样式作用域，确保样式不会“泄漏”到其他组件中，从而避免了样式冲突。此外，Stylable 还支持自定义伪类和伪元素，允许开发者抽象组件的内部结构，并在外部进行样式定制。

Stylable 的核心特性包括：

• 样式作用域：确保组件样式不会与其他样式冲突。
• 自定义伪类和伪元素：抽象组件内部结构，便于外部样式定制。
• 规则摇树：优化生成的 CSS 包，减少冗余代码。
• 跨浏览器兼容：在构建时将 Stylable CSS 转换为标准的、跨浏览器的 CSS。

2、项目快速启动

安装 Stylable

你可以通过以下两种方式安装 Stylable：

1. 使用 create-stylable-app 创建新项目：

   npx create-stylable-app my-stylable-app
   cd my-stylable-app
   npm install
   npm start
   

2. 在现有项目中安装 Stylable 和 webpack 插件：

   npm install @stylable/core @stylable/webpack-plugin --save-dev
   

配置 webpack

在 webpack.config.js 中添加 Stylable 插件：

const { StylableWebpackPlugin } = require('@stylable/webpack-plugin');

module.exports = {
  // 其他配置项
  plugins: [
    new StylableWebpackPlugin()
  ]
};

创建 Stylable 样式文件

在项目中创建一个 .st.css 文件，例如 Button.st.css：

/* Button.st.css */
.root {
  background: blue;
  color: white;
}

.icon {
  margin-right: 5px;
}

在组件中使用 Stylable 样式

在 React 组件中使用 Stylable 样式：

import React from 'react';
import { st, classes } from './Button.st.css';

const Button = ({ children }) => (
  <button className={classes.root}>
    <span className={classes.icon}>🚀</span>
    {children}
  </button>
);

export default Button;

3、应用案例和最佳实践

应用案例

• Mr Potato Bruce：一个展示 Stylable 的小型应用程序，展示了如何使用 Stylable 创建可重用的组件。
• Manual Vue Integration：一个简单的示例，展示了如何手动将 Stylable 集成到 Vue 项目中。

最佳实践

• 组件样式隔离：确保每个组件的样式完全隔离，避免样式冲突。
• 使用自定义伪类和伪元素：通过自定义伪类和伪元素，抽象组件的内部结构，便于外部样式定制。
• 优化 CSS 包：利用 Stylable 的规则摇树功能，优化生成的 CSS 包，减少冗余代码。

4、典型生态项目

Stylable 生态系统包含多个工具和插件，支持从开发到构建的各个环节：

• @stylable/cli：用于管理 Stylable 样式表的命令行工具。
• @stylable/webpack-plugin：与 webpack 集成的插件，支持 webpack 5.30.0 及以上版本。
• @stylable/rollup-plugin：与 Rollup 集成的插件，支持 Rollup v2.x 版本。
• @stylable/jest：Jest 的 Stylable 处理器插件，用于测试 Stylable 样式。

通过这些工具和插件，开发者可以更高效地使用 Stylable 进行组件化开发，并确保项目的可维护性和性能。

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