Webpack only generates JS, no CSS file from SCSS

Question

In my project I use Webpack with React and NodeJS. I want to generate a bundle.js and style.css file. Currently I've got the following code:

var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

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

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
    ]
  },

  plugins: [
    new ExtractTextPlugin('public/style.css')
  ]
}

But when I run webpack only the JS file is created in the ./public map:

    Asset    Size  Chunks             Chunk Names
bundle.js  844 kB       0  [emitted]  main
    + 222 hidden modules

Following examples/tutorials it's only oriented on CSS files, or obvious mistakes where made like not implementing ExtractText. I've also downloaded the packages sass-loader node-sass. In some examples I did found those packages where included, in some they weren't.

EDIT (require style in index.js):

import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'

import routes from './modules/routes'

require('./public/style.css')

render(
    <Router routes={routes} history={browserHistory} />,
    document.getElementById('app')
)

EDIT (webpack.config.js):

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test      : /\.scss$/,
        include   : path.join(__dirname, './public/sass'),
        loaders   : ["style", "css", "sass"]
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },

  sassLoader: {
    includePaths: [path.join(__dirname, './public/sass')]
  },

  plugins: [
    new ExtractTextPlugin(path.join(__dirname, './public/style.css'))
  ]

My folder structure looks like this:

webpack.config.js
index.js

/public
    index.html
    bundle.js (generated)

    /sass
        style.scss
        basics.scss (imported in style.scss)

WitVault · Accepted Answer · 2016-03-14 22:22:21Z

3

Make sure that you require your style file. e.g.

require('../sass/app.scss');

and I think you need style loader as well e.g.

{
        test      : /\.scss$/,
        include   : path.join(__dirname, 'sass'),
        loaders   : ["style", "css", "sass"]
}

These three loaders perform following operations

Turn your scss files into plain CSS with the sass loader
Resolve all the imports and url(...)s in the CSS with the help of CSS loader
Insert those styles into the page with the style loader

edited Mar 14, 2016 at 22:22

answered Mar 14, 2016 at 22:17

WitVault

24.2k20 gold badges107 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ronnyrr Over a year ago

Thanks for your reply. I did add the loader to my code (above the extract loader) and required the css file in my entry, index.js (see my edited code). I also did add the sassLoader again.. Although it still doesn't work. When I run webpack I get the following error: Error in index.js Module not found: Error: Cannot resolve 'file' or 'directory' ./public/style.css. I don't see what I'm doing wrong?!

Shawn Patrick Rice Over a year ago

You're requiring the wrong file: require ./public/style.scss not ./public/style.css; you're using the sass loader not the css loader.

Shawn Patrick Rice · Accepted Answer · 2016-03-15 16:22:45Z

0

You need a combination of the ExtractTextPlugin and the style loader.

module: {
  loaders: [
      { 
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!sass-loader'),
      },
  ],
}

...

plugins: [
  new ExtractTextPlugin(path.join(__dirname, 'public', 'style.css')), 
],

In my working configs, I also have a possibly extraneous entry in resolve:

resolve: {
  loaders: [
    {
      test: /\.(css|scss)$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
    },
  ],
},

The other error might be how you're including it in index.js. You're using require('./public/style.css') rather than require('./public/style.scss').

answered Mar 15, 2016 at 16:22

Shawn Patrick Rice

80010 silver badges17 bronze badges

Collectives™ on Stack Overflow

Webpack only generates JS, no CSS file from SCSS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related