I want to use an entry - materialize.scss (which imports many other scss files) and to pile it into a separate output - materialize.min.css file.

How exactly do I do that with Webpack?

I tried a million different setups with extract-text-webpack-plugin along with css, style, sass loader, node-sass, resolve-url-loader though I'd get different errors, and fixing one just leads to another so... I'm lost!

I want to use an entry - materialize.scss (which imports many other scss files) and to pile it into a separate output - materialize.min.css file.

How exactly do I do that with Webpack?

I tried a million different setups with extract-text-webpack-plugin along with css, style, sass loader, node-sass, resolve-url-loader though I'd get different errors, and fixing one just leads to another so... I'm lost!

• javascript
• css
• sass
• webpack
• frontend

• 2 Webpack is used to pack JS at first place and styles are required from JS modules. Please, share your JS. If you need to pile styles only you can go some other ways: npm scripts or gulp – terales Commented Nov 1, 2016 at 8:31
• I know what Webpack is and I'm pretty sure it's capable of doing such task without importing styles in the JS. Extract-text-webpack-plugin. – Ivan Ash Commented Nov 1, 2016 at 8:40
• 1 From it's readme: It moves every require("style.css") in entry chunks into a separate css output file. – terales Commented Nov 1, 2016 at 8:46

2 Answers 2

This is the webpack.config.js file that I used when i was trying to pile css into a separate file

|-- App 
    |-- dist
    |-- src
        |-- css
            |-- header.css
        |-- sass
            |-- img
            |-- partials
                |-- _variables.scss
            |-- main.scss
        |--ts
            |-- tsconfig.json
            |-- user.ts
        |-- main.js
    |-- app.js
    |-- webpack.config.js


var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCss = new ExtractTextPlugin("css/style.css");
var autoprefixer = (require("autoprefixer"))({ browsers: ['last 2 versions'] });
var precss = require("precss");
var sugarss = require('sugarss');
var colormin = require('postcss-colormin');
var path = require("path");

module.exports = {
    entry: {
        app: ['./src/sass/main.scss', './src/main.js']
    },
    //devtool:"source-map",
    output:{
        filename: "bundle.js",
        path: path.resolve(__dirname,"dist"),
        publicPath: "/dist/"
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    },
    module:{
        loaders:[
            {
                test:/\.s?(a|c)ss$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("css!postcss!sass")
            },/*
            {
                test:/\.css$/,
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader", "postcss-loader","precss")
            },*/
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                loaders: [
                    'file?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("bundle.css")
    ],
    postcss: function(){
      return {
        plugins: [ autoprefixer, precss ]
      }
    }
}

Prerequisite

• css-loader
• node-sass
• sass-loader
• style-loader
• extract-text-webpack-plugin

$ npm install css-loader node-sass sass-loader style-loader extract-text-webpack-plugin --save-dev

webpack.config.js

This is my demo webpack.config.js, change path based on your project structure:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');

const srcPath = path.join(__dirname, 'src');
const dstPath = path.join(__dirname, 'dst');

const sassLoaders = [
    'css-loader?minimize',
    'sass-loader?indentedSyntax=sass&includePaths[]=' + srcPath
];

module.exports = {
    entry: {
        client: './src/js/client'
    },
    module: {
        loaders: [
            /*README:https://github./babel/babel-loader*/
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules|bower_ponents)/,
                loader: 'babel',
                query: {
                    presets: ['react', 'es2015'],
                    cacheDirectory: true
                },
                plugins: ['transform-runtime']
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
            },
            {
                test: /\.(png|jpg|bmp)$/,
                loader: 'url-loader?limit=8192'
            }
        ]
    },
    output: {
        path: dstPath,
        filename: '[name].js'
    },
    plugins: [
        new ExtractTextPlugin('[name].min.css')
    ]
};

And the demo project on GitHub.