React加载stylus文件

日结一篇博客系列： 4.15.18 HangZhou

习惯了stylus / less /sass 写法去编写css ，刚入手React的时候实在不喜欢JSX内部定义CSS的写法，想我大前端Web怎么能区于满足Css那古板的写法呢，便整理了React中加载Stylus的写法，Less / Sass 后续有时间可以补上

• 安装stylus / stylus-loader

  
  // 使用npm的方式
  npm install stylus stylus-loader --save-dev
  // 使用yarn的方式
  yarn add stylus stylus-loader --save-dev

• 在webpack配置依赖

  如果要手动配置webpack的话，React必须先把配置Eject出来

  1.先弹射出webpack所有配置(!!!PS: 此操作是不可逆的)

  
  ／／ 使用npm的方式
  npm run eject
  // 使用yarn的方式
  yarn run eject

  react-cli会询问你是否执行操作，并提示你这个操作是不可逆的

  2.在弹射出来的config文件夹下找到webpack.config.dev.js

  
  // 在module rules里面添加stylus-loader的规则
   module: {
      strictExportPresence: true,
      rules: [
          ...
           oneOf: [ 
              ...
              {
              test: /\.styl$/, 
              loaders: ['style-loader', 'css-loader', 'stylus-loader']
            },
           ]
      ]
      ...
    }

  3.在file-loader添加对.styl文件的解析

  
  // 在oneOf的最底部找到file-loader
    {
      exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/, /\.styl$/], // 添加styl文件的解析
      loader: require.resolve('file-loader'),
      options: {
          name: 'static/media/[name].[hash:8].[ext]',
      },
    },

  4.在jsx文件中引用styl文件

  import React, { Component } from 'react'
  import './index.styl'
  ​
  class App extends Component {
    render() {
      return (
        <div className="main">
        </div>
      )
    }
  }
  ​
  export default App
  ​

  尽情享用styl带来的极速的快感吧～

  獻上我的styl文件，

  
  .main {
    position absolute
    top 0
    left 0
    right 0
    bottom 0  
  }

        喜欢就点个赞吧。谢谢你～

        :D