S
S
silencer-spirit2017-07-01 10:36:49
webpack
silencer-spirit, 2017-07-01 10:36:49

Why is webpack not generating css file?

The third day I struggle with webpack and connecting sass to it. There is such a configuration, but it does not generate a css file from sass. I will be very grateful for help.

const NODE_ENV = process.env.NODE_ENV || 'development';
const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractSass = new ExtractTextPlugin({
    filename: './css/main.css',
    allChunks: true
})

module.exports = {
    entry: './js/main.js',

    output: {
        publicPath: '/js/',
        filename: './js/common.js',
        library: 'common'
    },

    externals: {
        jquery: '$'
    },

    watch: NODE_ENV == 'development',

    watchOptions: {
        aggregateTimeout: 100
    },
    
    devtool: 'cheap-eval-source-map',

    resolve: {
        modules: ['./', 'node_modules'],
        extensions: ['*', '.js']
    },

    resolveLoader: {
        modules: ['node_modules'],
        moduleExtensions: ['-loader'],
        extensions: ['*', '.js']
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                include: __dirname + './js/main.js',
                loader: 'babel?presets[]=es2015',
            },
            {
            test: /\.sass$/,
            include: [
                path.resolve(__dirname, '/sass')
            ],
            use: extractSass.extract({
                use: [ 
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }

                     ]
                })
            }
        ],
        noParse: /jquery/
    },

    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            NODE_ENV: JSON.stringify(NODE_ENV)
        }),
        new UglifyJSPlugin(),
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            server: { baseDir: ['./'] }
        }),
        extractSass
    ],
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
I
Ilya, 2017-07-07
@ilyapashkov02

do you import them into js?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question