静的プロパティをスタイルシートにコンパイルするためのwebpackやbabelプラグインの作成

Question

Reactコンポーネントクラスの中にスタイル（スタイラス）を宣言したいと思います。また、CSSモジュールを利用しながら、好ましくは：おそらく

export default class HelloWorld extends Component { 
    render() { 
    return (
     <div className={styles.hello} /> 
    ); 
    } 

    static styles = ` 
    .hello 
     display block 
    `; 
} 

あるいは

const styles = stylus` 
    .hello 
    display block 
`; 

const HelloWorld =() => <div className={styles.hello} /> 

ここでの目標は、スタイラス（又は別のプリプロセッサ）を介して、スタイルシートにスタイルをコンパイルすることを、結果からstyleブロックを取り除きますJSXのCSSモジュールとclassNameプロパティを使用して、スタイル、アクセス、JavaScriptのバンドルを作成します。私はこれらを実行時ではなくコンパイル時（babel/webpack）でコンパイルしたいと思っています。

私は必ずしも固くて速いコードを探しているわけではありませんが、いずれの方向にも大いに感謝します。私はこれのすべてが可能であるかどうかは確かではありませんが、間違いなくいくつかはそうすべきです。 styles.でアクセスするスタイルは実現できない可能性があります。

私はバベルやウェブパックのプラグインを書いたことがないので、どこから始めたらよいか分かりません。私が読んだドキュメンテーションやチュートリアルのほとんどは、私が行きたいと思っていた場所に私をつかまえていないようです。あなたが何をしようとして

おかげ

Answer 1

はできませんが、回避策はあり;残念ながら、答えはバスタブジンのように味がするかもしれません。ご存知のように、直接requireスタイラスにすることはできません。したがって、スタイラスローダーを使用することを余儀なくされた場合は、スタイラスローダーまたはWalmarts stylus-relative-loaderという2つのオプションがありますが、後者をお勧めします。物事がちょっと複雑になるところです。 CSSモジュールを使用してスタイルをスタイルシートにコンパイルしたいので、extract-text-webpack-pluginを使用する必要があります。

Webpack 1.xを使用している場合、extract-text-webpack-plugin、css-modules、およびstylusを使用するWebpack設定に実装する必要があるローダーの設定例がここにあります-relative-loader。ここから

module: { 
    loaders: [{ 
     test: /\.styl$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!stylus-relative-loader') 
    }] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('main.css') 
    ] 

あなたがする必要があるすべてのあなたがそうのようなコンポーネントを反応させるのにそれをmy-styles.stylのような別のファイルにあなたのスタイラスを移動し、その後requireです。

const styles = require('./my-styles.styl') 

const HelloWorld =() => <div className={styles.hello} /> 

PS。申し訳ありませんが、これはあなたが探しているものではないが、私の "評判"は私がコメントを通じて質問をすることはできませんし、私は2つ以上のリンクを使用することはできません。