Möglicherweise benötigen Sie einen geeigneten Loader für diesen Dateityp: Webpack 2

Question

Ich habe ein Upgrade auf Webpack 2 durchgeführt und habe Probleme mit meinen Ladeprogrammen. Meine Projektstruktur ist wie folgt:

. 
├── components 
│ └── App.js 
│ 
├── public 
│  └──css 
│   └──custom.css 
└── src 
    └──sass 
     └──custom.scss 

Innen App.js

import '../src/sass/custom.scss' 

Innen webpack.config.js module.exports =

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'sass-loader' }), 
    include: __dirname + '/src/sass' 
} 

Innen webpack.config.js Plugins

//Add Bourbon dependency 
    new webpack.LoaderOptionsPlugin({ 
    options: { 
     sassLoader: { 
     includePaths: require('bourbon').includePaths, 
     outputStyle: 'expanded', 
     }, 
     context: '/src/sass', 
    } 
    }) 

Mein Produkt tion Skript in package.json

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

Aber ich bekomme diese Fehlermeldung:

**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; 
| } 

Ich weiß nicht, warum es nicht meine Lader finden. Ich habe alles neu installiert (css, sass, style loaders) und sogar in die Dev- und Production-Dependencies eingefügt.

Es scheint eine Menge Probleme mit Webpack 2 und schlechte Dokumentation zu geben. Gibt es etwas, was mir hier fehlt?

Answer 1

Ich glaube, dass wenn Sie regexp test verwenden, dann brauchen Sie nicht ! Style-loader! Sass-loader! bei deinem Import Es kann das Problem verursachen, während die gesamte Zeichenfolge analysiert wird.