您可能需要适当的加载器来处理此文件类型：Webpack 2

Question

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?

Answer 1

I believe that if you are using regexp test, then you don't need !style-loader!sass-loader! at your import. It may cause the problem as whole string is being parsed.