当前位置：首页 > React

react 如何使用stylus

2026-02-26 17:03:41React

在 React 中使用 Stylus

要在 React 项目中集成 Stylus（CSS 预处理器），需要安装相关依赖并配置构建工具（如 Webpack 或 Vite）。以下是具体方法：

安装 Stylus 依赖

通过 npm 或 yarn 安装 stylus 及其 loader（若使用 Webpack）：

npm install stylus stylus-loader --save-dev
# 或
yarn add stylus stylus-loader --dev

配置 Webpack

若项目基于 Webpack（如 Create React App 自定义配置），需修改 webpack.config.js：

在 module.rules 中添加 Stylus 规则：

react 如何使用stylus

{
  test: /\.styl$/,
  use: [
    'style-loader',
    'css-loader',
    'stylus-loader'
  ]
}

确保已安装 style-loader 和 css-loader：

npm install style-loader css-loader --save-dev

配置 Vite

若使用 Vite，安装 vite-plugin-stylus（或直接依赖 stylus）：

安装插件：

react 如何使用stylus

npm install vite-plugin-stylus --save-dev

在 vite.config.js 中配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import stylus from 'vite-plugin-stylus';

export default defineConfig({
  plugins: [react(), stylus()]
});

创建 Stylus 文件

在组件目录中创建 .styl 文件，例如 styles.styl：

$primary-color = #3498db

.button
  background: $primary-color
  padding: 10px 20px
  border-radius: 4px

在 React 组件中引入

通过 import 直接引入 Stylus 文件：

import './styles.styl';

function App() {
  return <button className="button">Click Me</button>;
}

注意事项

Create React App (CRA)：默认不支持 Stylus，需通过 eject 或使用 react-app-rewired 自定义配置。
CSS Modules：若需模块化，可配置 css-loader 的 modules 选项，并命名文件为 [name].module.styl。
语法高亮：为 .styl 文件安装编辑器插件（如 VSCode 的 stylus 扩展）。