Jak skonfigurować webpack do korzystania z kompasu w moim projekcie?

Question

Jestem nowy w pakiecie sieci Web i nie wiem, w jaki sposób możemy użyć Compass (CSS Authoring Framework) w projekcie.

Czy istnieje dobra metoda?

Dzięki

Answer 1

można użyć 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") 
     } 
    ] 
    } 
}; 

o to helpful webpack boilerplate

Aktualizacja:

Można użyć sass-resources-loader która @import zasobów Sass w każdym wymagany moduł SASS. gdzie nigdy nie będziesz musiał importować swoich zasobów do wszystkich plików 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') 

sprawdź wdrożenia in action in this boilerplate

Answer 2

niezbędny dodatek do @Ayman Jitan odpowiedź https://stackoverflow.com/a/34967698/1114926.

Trzeba dodać te dwie linie na początku pliku styles.scss:

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

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

przeciwnym razie dostaniesz błędy z sass-loader „build Moduł powiodło się” i „nie znaleziono” wstawek. Jak następuje:”

Module build failed: 
undefined 
       ^
     No mixin named background 

Jeśli dodać tylko @import "compass/functions"; (bez @import "compass";), można uzyskać ten błąd (zależy od wstawek dołączyć, w moim przypadku to był rzucony przez @include background(linear-gradient(white, #cccccc, #aaaaaa));):

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

Answer 3

.

Od kompasu jest pół-ruby i ramy pół-Sass, compass-mixins może działać nieprawidłowo pokojowe kod Legacy SCSS

Aby włączyć oryginalny kompas w swojej WebPACK config, należy użyć:

ruby-sass-loader

z opcją compass.

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

UWAGA!: Kompas to no longer supported