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

阅读更多
个人分类: 前端 React
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭