CODEWITHSUNDEEP
webpack
Alain Jacomet Forte
Alain Jacomet Forte

Reputation: 4685

Getting Started With stylus-loader for Webpack

Alright so (new to this):

I just added my stylus-loader, style-loader (as recommended by stylus-loader) and the loader { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' } to the webpack config. Now on my Main.js file I'm adding var css = require('!css!stylus!./Main.styl');. So, should I be seeing the compiled css in the html now ? Not sure if I'm getting this 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>

Upvotes: 3

Views: 14092

Answers (3)

crapthings
crapthings

Reputation: 2485

check my config

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 work with inline style

but i can't figure out how to make a bundle.css to

<link rel=stylesheet />

Upvotes: 1

Joey
Joey

Reputation: 1

You've misspelled "exclude" with "exculde".

And btw (https://github.com/seaneking/poststylus):

"Unfortunately the Stylus end event that PostStylus uses to pass back post-processed css doesn't accept a callback, so until this bug is patched upstream PostStylus cannot work with asynchronous PostCSS processing."

I had to make separate files for using LostCSS (PostCSS grid) which I imported with just the grid (each component had it's own style.styl file and lost.css file). Worked for me.

Upvotes: 0

Juho Veps&#228;l&#228;inen
Juho Veps&#228;l&#228;inen

Reputation: 26873

You can replace

var css = require('!css!stylus!./Main.styl');

with

var css = require('./Main.styl');

thanks to your setup.

The CSS will get converted into JavaScript and included in the JavaScript bundle by default.

I hope this helps.

Upvotes: 3

Related Questions