Come configurare il webpack per usare la bussola nel mio progetto

Question

Sono nuovo nel webpack e non so come possiamo usare Compass (CSS Authoring Framework) in un progetto.

Esiste un buon metodo?

Grazie

Answer 1

è possibile utilizzare compass-mixins

var path = require('path'); 
module.exports = { 
    ... 
    module: { 
    loaders: [ 
     { 
     test: /\.scss$/, 
     loader: "style!css!sass?includePaths[]=" + path.resolve(__dirname, "./node_modules/compass-mixins/lib") 
     } 
    ] 
    } 
}; 

ecco un aggiornamento helpful webpack boilerplate

:

È possibile utilizzare sass-resources-loader che @import le risorse SASS in ogni richiesto il modulo SASS. dove non dovrai mai importare le tue risorse in tutti i tuoi file sass.

module.exports = { 
    ..., 
    module: { 
    loaders: [ 
     ..., 
     { 
     test: /\.scss$/, 
     loaders: [ 
      'style', 
      'css', 
      'sass?outputStyle=expanded&includePaths[]=' + path.resolve(__dirname, './node_modules/compass-mixins/lib'), 
      'sass-resources' 
     ] 
     } 
    ] 
    }, 
    sassResources: path.resolve(__dirname, './client/app/resources/stylesheets/base.scss') 

si prega di verificare l'attuazione in action in this boilerplate

Answer 2

essenziale Oltre a @Ayman Jitan risposta https://stackoverflow.com/a/34967698/1114926.

è necessario aggiungere queste due righe in alto del file styles.scss:

@import "compass"; // <-- 
@import "compass/functions"; // <-- 

.foo { 
    min-height: 100px; 
    background-color: #fff; 
} 

altrimenti otterrete gli errori da sass-loader "accumulo modulo non riuscita" e "No mixin" trovata. Come la seguente"

Module build failed: 
undefined 
       ^
     No mixin named background 

Se si aggiunge solo @import "compass/functions"; (senza @import "compass";), si può ottenere questo errore (dipende dal mixin di includere, nel mio caso è stato gettato dal @include background(linear-gradient(white, #cccccc, #aaaaaa));):

Module build failed: 
undefined 
         ^
     Media query expression must begin with '(' 

Answer 3

.

Dal momento che la bussola è una mezza rubino e di un quadro di mezza sass, compass-mixins può funzionare in modo non corretto con codice legacy SCSS

Per abilitare la bussola originale nella configurazione webpack, si dovrebbe usare:

ruby-sass-loader

con l'opzione compass.

module.exports = { 
    // ...  
    module: { 
    loaders: [ 
     /* some other loaders */ 
     { 
     test: /\.scss$/, 
     loader: 'style!css!ruby-sass?compass=1' 
     } 
    ] 
    } 
}; 

NB!: Compass is no longer supported