React加载stylus文件

原创 2018年04月15日 20:42:05

日结一篇博客系列: 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 配置stylus的方式。

其实这个我是按照配置scss的方式搞的,没有想到竟然成功了。 创建完项目后,要执行npm eject 也就是打开全部配置项。 找到config里面的两个配置文档。 配置的内容都是一样的。 ...
  • well2049
  • well2049
  • 2017-12-01 12:07:41
  • 175

React加载stylus文件

日结一篇博客系列: 4.15.18 HangZhou习惯了stylus / less /sass 写法去编写css ,刚入手React的时候实在不喜欢JSX内部定义CSS的写法,想我大前端Web怎么能...
  • frank_come
  • frank_come
  • 2018-04-15 20:42:05
  • 36

React按需加载Antd

日结博客 16.04.18 HangZhouAntd作为阿里开发的一个React UI库(不仅仅是UI库)如何按需加载呢?其实很简单1.安装antdnpm install antd --save ya...
  • frank_come
  • frank_come
  • 2018-04-16 22:11:24
  • 26

引用stylus文件,stylus文件中再引用.svg的问题

文件结构 我在header.vue文件中用相对路径引入了icon.styl文件   @import "../../common/stylus/icon.styl"; 又在...
  • Vivi900911
  • Vivi900911
  • 2017-11-28 12:07:56
  • 139

在vue项目中使用stylus

前提条件是已经有了vue项目,如果没有,请先建立,具体方法看这里https://cn.vuejs.org/v2/guide/installation.html安装stylus好了,建立好项目后我们来安...
  • shooke
  • shooke
  • 2017-07-23 13:49:37
  • 4646

webpack安装使用教程

写在前面的话阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时...
  • SMoothiemiss
  • SMoothiemiss
  • 2017-12-19 17:31:30
  • 518

前端模块化工具--webpack学习心得

话说前头 webpack前段时间有听说一下,现在已经到了3.x的版本,自己没去接触。因为之前使用gulp来作为自己的项目构建工具。现在感觉gulp使用的趋势在减少。现在这段时间去接触了webp...
  • sD7O95O
  • sD7O95O
  • 2017-07-24 07:13:03
  • 68

第一节,加载react native js文件的方法和渲染元素

Document    
  • daily886
  • daily886
  • 2016-12-16 11:20:24
  • 536

在stylus格式的图标字体里url无法解析

问题最近在使用Vue开发时 使用了icmoon生成的字体图标,但是引入项目文件后一直报错。我尝试了使用stylus引用、CSS引用 都不可以。解决方式后来尝试把font资源放在static文件下,使...
  • lvchenqiang_
  • lvchenqiang_
  • 2017-12-17 18:08:05
  • 215

stylus使用再升级

1、一些使用技巧常常在一些很常见的场景中使用,比如插值,常在做浏览器兼容性处理时使用。还是要做一些总结。 stylus中文版参考文档:http://www.zhangxinxu.com/jq/sty...
  • u013217071
  • u013217071
  • 2017-06-09 10:13:28
  • 250
收藏助手
不良信息举报
您举报文章:React加载stylus文件
举报原因:
原因补充:

(最多只允许输入30个字)