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