Skip to content

Instantly share code, notes, and snippets.

@wesbos
Created February 7, 2017 21:25
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save wesbos/54e32dab4dd3e7d86893c91f4b29139c to your computer and use it in GitHub Desktop.
Save wesbos/54e32dab4dd3e7d86893c91f4b29139c to your computer and use it in GitHub Desktop.
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const javascript = {
test: /\.(js)$/,
use: [{
loader: 'babel-loader',
options: { presets: ['es2015'] }
}],
};
const styles = {
test: /\.(scss)$/,
use: ExtractTextPlugin.extract(['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'])
};
const uglify = new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false }
});
const config = {
entry: {
App: './public/javascripts/delicious-app.js'
},
devtool: 'source-map',
output: {
path: path.resolve(__dirname, 'public', 'javascripts', 'dist'),
filename: '[name].bundle.js'
},
module: {
rules: [javascript, styles]
},
plugins: [
new ExtractTextPlugin('please-just-make-this-a-file.css'),
]
};
module.exports = config;
@thasmo
Copy link

thasmo commented Feb 7, 2017

Try use: ExtractTextPlugin.extract(['css-loader?sourceMap', 'sass-loader?sourceMap']) on line 15.

@wesbos
Copy link
Author

wesbos commented Feb 7, 2017

@wesbos
Copy link
Author

wesbos commented Feb 7, 2017

Yep that was it - no need for style-loader

@bedakb
Copy link

bedakb commented Feb 8, 2017

@wesbos you can use style-loader as fallback loader, if you need.I worked on one webpack setup few days ago and this is how I did it:

{
   test: /\.scss$/,
   use: ExtractTextPlugin.extract({
        fallbackLoader: 'style-loader',
        loader: 'css-loader!sass-loader',
        publicPath: '/public'
    })
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment