当前位置：首页 > React

react 如何使用stylus

2026-03-31 10:31:34React

在 React 中使用 Stylus

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

安装 Stylus 及相关依赖

确保项目已安装 stylus 和 stylus-loader（Webpack 项目）或 vite-plugin-stylus（Vite 项目）。通过 npm 或 yarn 安装：

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

对于 Vite 项目：

npm install stylus vite-plugin-stylus --save-dev
# 或
yarn add stylus vite-plugin-stylus -D

配置 Webpack

在 webpack.config.js 中添加 stylus-loader 规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          'style-loader',
          'css-loader',
          'stylus-loader',
        ],
      },
    ],
  },
};

确保 css-loader 和 style-loader 已安装。若使用 CSS Modules，需在 css-loader 中配置：

{
  loader: 'css-loader',
  options: {
    modules: true, // 启用 CSS Modules
  },
}

配置 Vite

在 vite.config.js 中引入 vite-plugin-stylus：

import { defineConfig } from 'vite';
import stylus from 'vite-plugin-stylus';

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

创建 Stylus 文件

新建 .styl 文件（如 styles.styl），编写 Stylus 语法：

$primary-color = #3498db

.container
  padding: 20px
  background: $primary-color

  .title
    font-size: 24px
    color: white

在组件中引入 Stylus 文件

在 React 组件中直接导入 .styl 文件：

import './styles.styl';

function App() {
  return (
    <div className="container">
      <h1 className="title">Hello Stylus</h1>
    </div>
  );
}

使用 CSS Modules（可选）

若需模块化样式，将文件命名为 [name].module.styl，并在组件中按模块导入：

react 如何使用stylus

import styles from './styles.module.styl';

function App() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello Stylus</h1>
    </div>
  );
}

注意事项

变量共享：如需在 JavaScript 和 Stylus 间共享变量（如主题色），可通过 css-loader 的 additionalData 选项注入全局变量。
PostCSS 集成：若项目中已使用 PostCSS，确保 stylus-loader 在 PostCSS 之前处理文件。
热更新：开发时需确保样式文件修改后能热更新，通常配置正确后会自动支持。

通过以上步骤，即可在 React 项目中顺利使用 Stylus 编写样式。