Webpack scss dosyalarını birleştirme

Question

Son projemde, tüm .scss dosyalarını çeşitli klasörlerden bir .scss dosyasına sığdırmak için yemin ettim. Ardından singap .scss dosyasını css'ye derlemek için sass kullanıyordum.

gulp.task('styles', function() { 
    gulp.src('styles/**/*.scss') 
    .pipe(concat('style.scss')) 
    .pipe(gulp.dest('production/')) 

    .pipe(sass({outputStyle: 'expanded'})) 
    .pipe(gulp.dest('production/')) 

    .pipe(sass({outputStyle: 'compressed'})) 
    .pipe(rename('style-min.css')) 
    .pipe(gulp.dest('production/')); 
}); 

Şimdi WebPack ile tam olarak aynı 'bina sürecini' oluşturmak istiyorum.

entry: { 
    "style": "./styles/**/*.scss", 
    "style.min": "./styles/**/*.scss" 
}, 
output: { 
    path: __dirname, 
    filename: "[name].css" 
}, 
plugins: [ 
    new ExtractTextPlugin('[name].css') 
], 
module: { 
    loaders: [ 
     //Sass file 
     { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') } 
    ] 
} 

Ne yazık ki Webpack ** ve * .scss. Aynı davranışı kazanmak için herhangi bir çözüm var mı?

PS Bu dosyalara katılmam gerekiyor. Ben Sass @imports vb Örneğin

Answer 1

her türlü kullanmak istemiyorsanız, aşağıdaki gibi node-glob paketini kullanabilirsiniz:

var glob = require('glob'); 
var styles = glob.sync('./styles/**/*.scss'); 

module.exports = { 
    entry: { 
    'style': styles, 
    ... 

Answer 2

Sen için, javascript dışındaki tüm dosya türleri için yükleyici kullanmak gerekir webpack kullanarak yükleyin. Senin durumunda sass-loader, css-loader, style-loader'a ihtiyacınız var. Aşağıda yükleyin

npm webpack.config.js

ekle küstahlık-yükleyici css-yükleyici tarzı-Loader

yüklemek bağımlılıkları

1. : En scss eser webpack kullanarak yapmak için aşağıdaki adımları uygulayın

   Webpack yapılandırması

   module.exports = { 
       module: { 
       loaders: [ 
       { 
        test: /\.scss$/, 
        loaders: ["style", "css", "sass?config=otherSassLoaderConfig"] 
       } 
       ] 
   }, 
   otherSassLoaderConfig: { 
   
   } 
   }; 
   

   3. Şimdi sadece require('./style.scss') olarak SCSS dosyasını gerektiren ve aynı zamanda bir göz alabilir detaylı refrence için

yüklenecektir: https://stackoverflow.com/a/26876311/3878940