Webpack concatenate scss files

1
votes

In my last project I used gulp to concat all .scss files from several folders into one .scss file. Next I was using sass to compile that singe .scss file into css.

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/'));
});

Now I want to create exactly the same 'building process' with Webpack. 

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') }
    ]
}

Unfortunately Webpack don't understand ** and *.scss. Is there any solution to gain the same behavior?

PS I need to concat those files. I don't want to use any kind of Sass @imports etc.

2
javascriptcssbuildsasswebpack

2 Answers

0
votes

For example, you could use node-glob package like this:

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

module.exports = {
  entry: {
    'style': styles,
  ...
-3
votes

You need to use loaders for all file types except javascript, to load using webpack. In your case you need sass-loader, css-loader, style-loader. Perform the below steps to make your scss work using webpack:

  1. Install below dependencies

    npm install sass-loader css-loader style-loader

  2. Add the webpack.config.js

Webpack config

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

 }
};
  1. Now just require your scss file as require('./style.scss') and it will be loaded

For a detailed refrence you can also take a look at: https://stackoverflow.com/a/26876311/3878940