React中less和stylus的使用-CFANZ编程社区

React中less和stylus的使用

在react中使用stylus

下载

npm i stylus stylus-loader --save-dev

修改配置

暴露webpack.config.js文件

npm run eject

若是报错，运行git add . git commit –m ‘xxx’ 将文件保存到暂存再运行

在webpack.config.js中修改

React中less和stylus的使用_git

添加

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

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

React中less和stylus的使用_配置文件_02

在此位置添加stylus配置文件

// stylus 配置文件 { test: stylusRegex, exclude: stylusModuleRegex, use: getStyleLoaders({ importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'stylus-loader' ), sideEffects: true, }, { test: stylusModuleRegex, use: getStyleLoaders({ importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'stylus-loader' ), },

// stylus 配置文件
 {
   test: stylusRegex,
   exclude: stylusModuleRegex,
   use: getStyleLoaders({
       importLoaders: 2,
       sourceMap: isEnvProduction && shouldUseSourceMap,
     },
     'stylus-loader'
   ),
   sideEffects: true,
 },
{
   test: stylusModuleRegex,
   use: getStyleLoaders({
       importLoaders: 2,
       sourceMap: isEnvProduction && shouldUseSourceMap,
       modules: true,
       getLocalIdent: getCSSModuleLocalIdent,
     },
     'stylus-loader'
   ),
 },