編寫一個webpack或babel插件將靜態屬性編譯成樣式表

我想在我的React組件類中聲明我的樣式（手寫筆）。優選地，同時還利用CSS模塊：編寫一個webpack或babel插件將靜態屬性編譯成樣式表

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塊javascript包以及通過CSS模塊訪問樣式以及JSX中的className屬性。我寧願在編譯時編譯（babel/webpack），而不是在運行時編譯。

我不一定在尋找硬性和快速的代碼，但任何方向將不勝感激。我不確定是否所有這些都是可能的，儘管其中一些應該是可能的。我知道通過styles.訪問樣式可能不可行。

我從來沒有寫過babel或webpack插件，所以我幾乎不知道從哪裏開始。我讀過的大多數文檔和教程似乎都沒有讓我想去我想去的地方。

謝謝

來源

2016-10-05 switz

你想要做的事情是不可能的，但有一個解決方法;不幸的是，答案可能像浴缸杜松子酒。正如你可能知道的，你不能直接require手寫筆。因此，你不得不使用手寫筆加載器，你有兩種選擇，手寫筆加載器或Walmarts stylus-relative-loader，我會推薦後者。這是事情變得有點複雜的地方。由於您想使用CSS模塊並將樣式編譯爲樣式表，因此您必須使用extract-text-webpack-plugin。長話短說，如果你使用的是Webpack 1.x，這裏有一個你需要在你的Webpack配置中實現的裝載器配置示例，它使用了extract-text-webpack-plugin，css-modules和stylus -relative裝載機。

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。對不起，如果這不是您要查找的內容，但我的「聲譽」不允許我通過評論提問，也不能使用兩個以上的鏈接。

來源

2016-10-05 06:17:35 artisin

我很感謝答案。從我所收集的內容中，我可以構建一些將'static styles ='.css {}''從類中編譯/彙編成樣式表的東西，然而，我最初着手的實現是hacky，最好是醜陋的。我想現在不合理的是通過CSS模塊訪問該樣式表。即使我只能解決上半年，這仍然是我想追求的，但顯然一個完整的，理智的解決方案將是理想的。如果我拿出任何可用的東西，我會跟進。 – switz

編寫一個webpack或babel插件將靜態屬性編譯成樣式表

回答

相關問題