CSS file don't not create with webpack

Question

I use webpack and i would like generate my CSS file with SASS.

So i've add css-loader and sass-loader. But, webpack don't create my CSS folder. My webpackconfig :

const webpack = require('webpack'),
      ExtractTextPlugin = require('extract-text-webpack-plugin'),
      BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: './js/app.js',
    output: {
        path: './public',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
                test: /\.scss$/,
                loaders: ExtractTextPlugin.extract(["style", "css", "sass"])
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.bundle.css'),
        new BrowserSyncPlugin(
            {
                host: 'localhost',
                port: 3000,
                server: { baseDir: ['./'] }
            }
        )
    ]
}

Do you have any idea ?

Thank you !

score 0 · Accepted Answer · answered May 20 '16 at 17:31

You could use the style!css!sass loaders. Just install them using npm and set the config below in your webpack.config.

{
   test: /\.scss$/,
   loader: 'style!css!sass?sourceMap'
}

Your final webpack.config should look like this:

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

module.exports = {
    entry: './js/app.js',
    output: {
        path: './js',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
              test: /\.scss$/,
              loader: 'style!css!sass?sourceMap'
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

Now your CSS should be bundled properly.

Replase first `loader` with `rules` and second `loader` with `use`. They are new version. — AmerllicA, Apr 19 '17 at 12:46

Richard Scarrott · Answer 2 · 2016-05-20T13:59:53.393

-1

plugins should be a root property, not a property of module.

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

module.exports = {
    entry: './js/app.js',
    output: {
        path: './js',
        filename: 'app.bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'stage-2']
                }
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style', 'css!sass')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('app.bundle.css')
    ]
}

edited May 20 '16 at 13:59

answered May 20 '16 at 13:13

Richard Scarrott

6,638
1
35
46

Hi riscarrott, i've try but no result, CSS file is not generate with your config – Stéphane R. May 20 '16 at 13:18
@StéphaneR. I think you may need the style-loader too, and the extract text plugin takes a filename, not a path (it's path is determined by the output options above) https://github.com/webpack/extract-text-webpack-plugin#usage-example-with-css – Richard Scarrott May 20 '16 at 13:30
@StéphaneR. Also, you had `loaders` instead of `loader` when defining your scss loader – Richard Scarrott May 20 '16 at 13:32
No result too, i've edit my first post with my actual config :( – Stéphane R. May 20 '16 at 13:44
This is pretty much a game of spot-the-difference but I think this is the last problem -- `ExtractTextPlugin.extract(["style", "css", "sass"])` should be `ExtractTextPlugin.extract("style", "css!sass")`. – Richard Scarrott May 20 '16 at 13:58

score -2 · Answer 3 · edited Aug 06 '17 at 15:46

-2

You have to import the scss file somewhere, like your index.js or App.js:

e.g. import './sass/main.scss';

edited Aug 06 '17 at 15:46

SurvivalMachine

7,946
15
57
87

answered Aug 06 '17 at 05:45

Mon

1,010
1
11
19

CSS file don't not create with webpack

3 Answers3

Linked