react中使用 stylus

1. 安装 stylus 、 stylus-load

npm install stylus stylus-loader --save-dev

注意，这俩版本一定要匹配，要不然报错

ypeerror this.getoptions is not a function

2. 显示隐藏的配置文件

npm run eject

3. config => webpack.config.js

定义常量

const stylusRegex = /\.(styl|stylus)$/;

const stylusModuleRegex = /\.module\.(styl|stylus)$/; 

rules中进行配置

// stylus 配置文件

{

test: stylusRegex,

exclude: stylusModuleRegex,

use: getStyleLoaders(

{

importLoaders: 3,

sourceMap: isEnvProduction

? shouldUseSourceMap

: isEnvDevelopment,

},

'stylus-loader'

),

// Don't consider CSS imports dead code even if the

// containing package claims to have no side effects.

// Remove this when webpack adds a warning or an error for this.

// See https://github.com/webpack/webpack/issues/6571

sideEffects: true,

},

// Adds support for CSS Modules, but using SASS

// using the extension .module.scss or .module.sass

{

test: stylusModuleRegex,

use: getStyleLoaders(

{

importLoaders: 3,

sourceMap: isEnvProduction

? shouldUseSourceMap

: isEnvDevelopment,

modules: {

getLocalIdent: getCSSModuleLocalIdent,

},

},

'stylus-loader'

),

},