I have upgraded to Webpack 2 and am having problems with my loaders. My project structure is as follows:
.
├── components
│ └── App.js
│
├── public
│ └──css
│ └──custom.css
└── src
└──sass
└──custom.scss
Inside App.js
import '../src/sass/custom.scss'
Inside webpack.config.js module.exports =
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'sass-loader' }),
include: __dirname + '/src/sass'
}
Inside webpack.config.js plugins
//Add Bourbon dependency
new webpack.LoaderOptionsPlugin({
options: {
sassLoader: {
includePaths: require('bourbon').includePaths,
outputStyle: 'expanded',
},
context: '/src/sass',
}
})
My production script in package.json
"production": "rm -rf public/index.html && NODE_ENV=production webpack -p && NODE_ENV=production node app.js"
But I get this error:
**Child extract-text-webpack-plugin:
[0] ./~/sass-loader!./src/sass/custom.scss 283 bytes {0} [built] [failed] [1 error]**
ERROR in ./~/sass-loader!./src/sass/custom.scss
Module parse failed: /Users/user/apps/project/node_modules/sass-loader/index.js!/Users/user/apps/project/src/sass/custom.scss Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
| background: white;
| }
I don't know why it cannot find my loaders. I have reinstalled everything (css, sass, style loaders) and even put them in both Dev and production dependencies sections.
There seems to be a lot of of issues with webpack 2 and poor documentation. Is there anything I am missing here?
