react 如何使用stylus
安装 Stylus 及相关依赖
在 React 项目中使用 Stylus 需要安装 stylus 和 stylus-loader 依赖。如果项目基于 create-react-app 或其他脚手架工具，可能需要额外配置 Webpack。
运行以下命令安装依赖：
npm install stylus stylus-loader --save-dev配置 Webpack
如果项目未暴露 Webpack 配置（如 create-react-app），需先运行 npm run eject 或使用 craco/react-app-rewired 覆盖配置。以下为手动修改 Webpack 配置的示例：
// webpack.config.js (部分配置)
module: {
rules: [
{
test: /\.styl$/,
use: [
'style-loader',
'css-loader',
'stylus-loader'
]
}
]
}创建 Stylus 文件
新建 .styl 文件并编写样式代码。例如 styles.styl：
$primary-color = #3498db
.button
background-color: $primary-color
padding: 10px 20px
border-radius: 4px在组件中引入 Stylus 文件
在 React 组件中直接导入 .styl 文件：
import './styles.styl';
function App() {
return <button className="button">Click Me</button>;
}处理 CSS 模块（可选）
若需使用 CSS 模块化，修改 Webpack 配置：
{
test: /\.module\.styl$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { modules: true }
},
'stylus-loader'
]
}文件命名改为 styles.module.styl，组件中引用方式：
import styles from './styles.module.styl';
function App() {
return <button className={styles.button}>Click Me</button>;
}常见问题解决
- 语法错误：确保 Stylus 文件缩进正确，变量和混合（mixins）定义规范。
- HMR 不生效：检查 Webpack 的
hot-module-replacement配置是否启用。 - 路径别名：在 Webpack 中配置
resolve.alias简化导入路径。
通过以上步骤即可在 React 项目中顺利集成 Stylus 预处理器。
