一、stylus介绍

stylus是一个css预处理器，它有着自己独特的语法、变量、函数等功能来帮助开发者更加简单高效的完成css的编写工作。

二、webpack打包stylus

1.安装如下依赖包

npm i style-loader css-loader  stylus stylus-loader

2.新建src/stylus/default.styl文件,并添加如下代码

html,body
  margin 0
  padding 0
  font-size 40px
  text-align center

3. 在src/index.js新增如下代码，引入刚刚写好的default.styl文件

import "./stylus/default.styl"

4. 在webpack.config.js中新增如下代码，完成对stylus的解析

// 配置模块解析规则
module: {
    rules: [
      {
        test: /\.styl$/, // 匹配对应.styl后缀的文件
        loader: ['style-loader', 'css-loader', 'stylus-loader'] // 使用那些loader来处理这个文件
      }
    ]
  }, // 处理对应模块

5. 执行npm run build打包后，打开dist/index.html文件

   
   stylus初见
   

   可以看到刚刚写好的样式已经生效了

注意：使用stylus语法时，需要注意css的缩进
张鑫旭stylus介绍
stylus官网
css转换工具