Webpack: Können Sie einen Satz globaler Stile verwenden, die beim Kompilieren von vorverarbeiteten Stilen mit einem Loader verwendet werden?

Question

Ich bin mir nicht sicher, ob dies möglich ist oder nicht, und kann nichts darauf finden. Ich habe ein Webpack Setup mit Stylus Loadern, so dass die .styl Dateien direkt in die js Module importiert werden können.

Das Problem, mit dem ich konfrontiert bin, ist, dass der Präprozessor-Kontext mit dieser einzelnen .styl-Datei beginnt und endet.

Ich möchte in der Lage sein, globale Stile zu definieren, ab:

// global.styl 

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

, die auf importierte von den einzelnen .styl Dateien verlassen kann:

// my-comp.styl 

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

durch die js Komponente

// my-comp.js 

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

Ich möchte vermeiden, oderzu habendie globalen Stile in jeder einzelnen Stiftdatei, die es verwenden würde.

Gibt es eine Webpack-Konfiguration, die mir das erlauben würde?

Answer 1

Webpack 2: in den Regeln können Sie import Option stylus-loader passieren Stile global zu laden:

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

---

In webpack ich es auf diese Weise verwendet:

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