Getting Started with a Stylus Pen for Webpack
Ok, so (new to this):
I only added stylus-loader
, style-loader
(as recommended stylus-loader
) and the loader { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }
to the webpack config. Now in my Main.js file I add var css = require('!css!stylus!./Main.styl');
. So, should I see the compiled css in the html now? Not sure if I'm right.
webpack.config.js
webpackConfig = {
context: __dirname,
entry: {
app: ['webpack/hot/dev-server','./index.js']
},
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }
]
}
}
module.exports = webpackConfig;
index.js
var React = require('react');
var Main = require('./App/Components/Main');
class App extends React.Component{
render(){
return (
<Main />
)
}
}
React.render(<App />, document.getElementById('main'));
Main.js
'use strict'
import React from 'react';
import ReactCanvas from 'react-canvas';
var css = require('!css!stylus!./Main.styl');
var {
Surface
} = ReactCanvas;
class Main extends React.Component{
constructor() {
super();
this.size = document.getElementById('main').getBoundingClientRect()
}
render() {
return (
<Surface top={0} left={0} width={this.size.width} height={this.size.height}>
</Surface>
)
}
}
module.exports = Main
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Canvas</title>
</head>
<body>
<header>
<h1>React Canvas</h1>
</header>
<div id="main"></div>
<script src="http://localhost:8080/webpack-dev-server.js"></script>
<script src="bundle.js"></script>
</body>
</html>
source to share
check configuration
https://github.com/crapthings/postcss-test
https://github.com/crapthings/postcss-test/blob/master/webpack.config.js
var poststylus = require('poststylus')
module.exports = {
cache: true,
context: __dirname + '/app',
entry: './index.js',
output: {
path: __dirname + '/app',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/, query: { presets: ['es2015'], plugins: ['add-module-exports'] } },
{ test: /\.html$/, loader: 'html', exclude: /node_modules/ },
{ test: /\.css$/, loader: 'style!css!postcss', exclude: /node_modules/ },
{ test: /\.styl$/, loader: 'style!css!stylus', exclude: /node_modules/ }
]
},
stylus: {
use: [poststylus(['autoprefixer', 'postcss-short', 'postcss-sorting', 'postcss-cssnext', 'rucksack-css'])]
}
}
https://github.com/crapthings/postcss-test/blob/master/app/index.js
require('style!./test.styl')
I can get stylus and postcss to work with inline styling
but i can't figure out how to make bundle.css for
<link rel=stylesheet />
source to share
You misspelled "exclude" with "exculde".
And btw ( https://github.com/seaneking/poststylus ):
"Unfortunately, the Stylus end event that PostStylus uses to return the rendered css back does not accept a callback, so until this bug is fixed, PostStylus cannot handle PostCSS asynchronously."
I had to create separate files to use LostCSS (PostCSS grid), which I only imported with grid (each component had its own style.styl file and lost.css file). Worked for me.
source to share