Webpack loaders not processing

[Itagiba]

Do you want to request a feature or report a bug? BUG

What is the current behavior? I have been having a lot of problems with getting loaders to work in the new version of Webpack. I have posted my issues here. I am currently getting the following error:

.src/sass/custom.scss: Unexpected token (2:0)
@import "bourbon";

I am trying to get Webpack to create a separate .css file and process .scss sheets from a .src/sass/ directory in my APP root as per the thread link above.

My webpack.config.js has the following:

// webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

...

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

...

plugins: [

    new ExtractTextPlugin({ filename: './public/css/custom.css', disable: false, allChunks: true }),
    //Add Bourbon dependency
      new webpack.LoaderOptionsPlugin({
        options: {
          sassLoader: {
            includePaths: require('bourbon').includePaths,
            outputStyle: 'expanded',
          },
          context: '/src/sass',
        }
      }),

 ]

If the current behavior is a bug, please provide the steps to reproduce.

SCRIPT

    "production": "rm -rf public/index.html && NODE_ENV=production webpack -p && NODE_ENV=production node app.js",

app.js file

// app.js

require('babel/register')
require('./app-server.js')

Inside app-server.js I have import './src/sass/custom.scss'

What is the expected behavior? I want a generated custom.css from .src/sass/custom.scss inside the ./public/css/ but nothing happens.

I have seen other threads about this issue but none of the solutions helped me. Is there something I am doing wrong?

[bebraw]

Instead of loader: 'sass-loader' you probably want loader: ['css-loader', 'sass-loader'] due to that import. You need something to process it.

Please note that Stack Overflow is the official support channel for issues like this.

[Itagiba]

Thanks but I am not getting anywhere on Stackoverflow as per my link above. I have tried the array version:

      loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'sass-loader'] })

Still nothing. I have all packages in my json file:

    "babel": "^5.8.29",
    "babel-core": "^5.8.32",
    "babel-loader": "^5.3.2",
    "bourbon": "^4.2.7",
    "cosmicjs": "^2.0.0",
    "css-loader": "^0.26.1",
    "events": "^1.1.0",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^2.0.0-rc.2",
    "flux": "^2.1.1",
    "history": "^1.13.0",
    "hogan-express": "^0.5.2",
    "lodash": "^3.10.1",
    "react": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-router": "^1.0.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.1"
  },

[bebraw]

Hi,

It's very hard to say anything concrete without having a little project to run.

[Itagiba]

Ok, I banged something together as the original project is very large. Take a look here

Thanks.

[bebraw]

I see now. Since you are using sass and want to resolve against node_modules, you should use @import "~bourbon";. Due to the way bourbon has been packaged, that leads to another error like this. That has to do with the way Bourbon has been packaged.

I can see suggested solutions at https://github.com/jtangelder/sass-loader/issues/18 and https://github.com/fraserxu/webpack-bourbon-test . You can most likely adapt from those. Or you can escalate the issue at bourbon project.

There is nothing we can do about the issue at webpack core as this isn't a webpack bug. You should use Stack Overflow for support issues like this in the future.

[Itagiba]

Thanks. So the fact that webpack is not generating the custom.css file is related to this also? new ExtractTextPlugin({ filename: './public/css/custom.css', disable: false, allChunks: true }),

[bebraw]

@Itagiba It fails before it gets to generate the file, yeah. You can verify this by dropping bourbon temporarily.