Prise en main Avec le stylet-chargeur pour Webpack

Bien (nouveau):

J'ai juste ajouté mon stylus-loader, style-loader (tel que recommandé par stylus-loader), et le chargeur { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' } à la webpack config. Maintenant sur mon Main.js fichier, je suis en ajoutant var css = require('!css!stylus!./Main.styl');. Donc, je devrais être en train de voir la compilation des css dans le html, maintenant ? Ne sais pas si je suis de ce droit.

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>

OriginalL'auteur Alain Jacomet Forte | 2015-05-02

  1. 3

    Vous pouvez remplacer

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

    avec

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

    grâce à votre installation.

    Les CSS seront converties en JavaScript et inclus dans le JavaScript bundle par défaut.

    J'espère que cette aide.

    OriginalL'auteur Juho Vepsäläinen

  2. 1

    vérifier ma 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')

    je peux obtenir stylet et postcss travail avec style en ligne

    mais je ne peux pas comprendre comment faire un paquet.css pour

    <link rel=stylesheet />
    Copier et coller le code est mauvais: vous avez mal orthographié exclude partout où vous l'écrire.
    j'utilise le brunch maintenant
    erreur: Impossible de résoudre le module "style"

    OriginalL'auteur crapthings

  3. 0

    Vous avez mal orthographié "exclure" avec "exculde".

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

    "Malheureusement, le Stylet fin de l'événement que PostStylus utilise pour passer en post-traitement css ne pas accepter un rappel, jusqu'à ce que ce bug est corrigé en amont PostStylus ne peut pas travailler avec asynchrone PostCSS de traitement."

    J'ai dû faire des fichiers séparés pour l'utilisation de LostCSS (PostCSS grille) que j'ai importé avec juste la grille (chaque élément a son propre style.styl fichier et perdu.fichier css). A travaillé pour moi.

    OriginalL'auteur Joey