Webpack：プリプロセスされたスタイルをローダでコンパイルするときに使用するグローバルスタイルのセットを含めることはできますか？

Question

これが可能かどうかわからないし、何も見つけられないようだ。スタイラスローダーでwebpackをセットアップして、.stylファイルをjsモジュールに直接インポートできるようにしました。

私が直面している問題は、プリプロセッサコンテキストがその単一の.stylファイルで始まり、終了するということです。

私はグローバルなスタイルを定義できるようにしたいのですが、例：インポートされた個々の.stylファイルが依存することができ

// global.styl 

$brand-var1 = #000; 
$brand-var2 = #FFF; 

：JSコンポーネントによって

// my-comp.styl 

button { 
    background-color: $brand-var1; 
} 

// my-comp.js 

import './my-comp.styl' 
... 

@importまたはを避けたいそれを使用する各スタイラスファイル内のグローバルスタイル。

私にこれを可能にするwebpack設定はありますか？

Answer 1

のWebPACK 2：ルールにあなたはグローバルスタイルをロードするためにstylus-loaderにimportオプションを渡すことができます：WebPACKので

{ 
    test: /\.styl$/, 
    use: [ 
     'style-loader', 
     'css-loader', 
     { 
     loader: 'stylus-loader', 
     options: { 
      import: [ 
      resolve(__dirname, 'src/styles/global.styl') 
      ] 
     } 
     } 
    ], 
    exclude: /node_modules/ 
    } 

---

私はそれをこのように使用：

module.exports = { 
    ..., 
    stylus: { 
    import: [ 
     path.resolve(__dirname, './src/styles/globals.styl') 
    ] 
    } 
}