入門觸控筆裝載機的WebPack

好吧所以（新本）：入門觸控筆裝載機的WebPack

我只是說我stylus-loader，style-loader（由stylus-loader推薦）和裝載機{ test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }到的WebPack配置。現在在我的Main.js文件中，我添加了var css = require('!css!stylus!./Main.styl');。那麼，我現在應該在html中看到編譯後的CSS嗎？不知道我是否得到這個權利。

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>

來源

2015-05-02 Alain Jacomet Forte

您可以

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

感謝您的設置更換

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

。

CSS將被轉換爲JavaScript並默認包含在JavaScript包中。

我希望這會有所幫助。

來源

2015-05-03 09:57:43

檢查我的配置

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