Vous pouvez avoir besoin d'un chargeur approprié pour gérer ce type de fichier: Webpack 2

Question

J'ai effectué une mise à niveau vers Webpack 2 et j'ai des problèmes avec mes chargeurs. Ma structure du projet est la suivante:

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

app.js intérieur

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

intérieur 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', 
    } 
    }) 

Mes produits script tion dans package.json

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

Mais je reçois cette erreur:

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

Je ne sais pas pourquoi il ne peut pas trouver mes chargeurs. J'ai tout réinstallé (css, sass, loaders de style) et même les mettre dans les deux Dev et les sections de dépendances de production.

Il semble y avoir beaucoup de problèmes avec webpack 2 et une documentation médiocre. Y a-t-il quelque chose qui me manque ici?

Answer 1

Je crois que si vous utilisez le test regexp, alors vous n'avez pas besoin ! Style-loader! Sass-loader! à votre importation. Il peut causer le problème pendant que la chaîne entière est analysée.