Webpack 3: Utiliser sass-loader et ExtractTextPlugin ne fonctionne pas

Question

J'ai essayé d'utiliser le chargeur sass dans webpack et je suis ces instructions ->https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less mais cela ne fonctionne pas.

Quelqu'un peut-il m'aider?

référentiel

https://github.com/gpincheiraa/boolean-html-js-exercises/tree/dev

erreur

ERROR in Error: Child compilation failed: 
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example 

    - Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example 

dépendances

node v6.11.1 
npm 5.3.0 

├── babel-cli@6.26.0 
├── babel-loader@7.1.2 
├── babel-plugin-transform-class-properties@6.24.1 
├── babel-polyfill@6.26.0 
├── babel-preset-es2015@6.24.1 
├── babel-preset-stage-3@6.24.1 
├── css-loader@0.28.7 
├── extract-text-webpack-plugin@3.0.0 
├── html-loader@0.5.1 
├── html-webpack-plugin@2.30.1 
├── markdown-loader@2.0.1 
├── node-sass@4.5.3 
├── sass-loader@6.0.6 
├── style-loader@0.18.2 
├── webpack@3.5.6 
└── webpack-dev-server@2.7.1 

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: [ 
     "./index.js" 
    ], 
    output: { 
     path: __dirname + "/dist", 
     filename: "index.bundle.js" 
    }, 
    module: { 
     rules: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, 
      { test: /\.md$/, loaders: [ "html-loader", "markdown-loader" ] }, 
      { test: /\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: ['css-loader', 'sass-loader'] 
       }) 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('style.css'), 
     new HtmlWebpackPlugin({ 
      template: 'index.html', 
      inject: 'body' 
     }) 
    ], 
    devtool: "eval-source-map", 
    devServer: { 
     filename: "index.bundle.js", 
     contentBase: "./", 
     port: 3000, 
     publicPath: "/", 
     stats: { 
      colors: true 
     } 
    } 
}; 

Answer 1

La question vient de la commented style code in your index.html. Le index.html est traité par le html-webpack-plugin et, pour une raison quelconque, il essaie toujours de traiter les appels require (line 9 et line 11). La raison pourrait être le chargeur EJS personnalisé de html-webpack-plugin.

La solution la plus simple consiste à supprimer complètement le code commenté de index.html.

En important un fichier .scss, la règle que vous avez configurée est appliquée à celui-ci. Mais il semble que l'instance réelle extract-text-webpack-plugin n'est pas disponible pendant ce processus. Vous utilisez un chargeur en ligne dans ces appels nécessitent, mais vos règles configurées seront toujours appliquées à cela. Pour empêcher l'application d'autres chargeurs, vous pouvez préfixer l'importation avec un !.

De l'webpack documentation - Rule.enforce:

peut être omise Tous les chargeurs normaux (surchargées) par préfixer ! dans la demande.

Tous les chargeurs normaux et pré-chargeurs peuvent être omis (remplacés) en préfixant -! dans la demande.

Tous les chargeurs normaux, postaux et pré-chargeurs peuvent être omis (remplacés) par le préfixe !! dans la demande.

Pour pouvoir utiliser le CSS correctement dans votre code HTML, vous devez également utiliser css-loader après la sass-loader, parce EJS attend JavaScript à cet endroit, pas CSS nue. Le besoin deviendrait:

<%= require("!css-loader!sass-loader!\./sass/index.scss") %> 

Il serait également préférable d'importer index.scss dans votre application réelle au lieu du modèle qui est utilisé par html-webpack-plugin.

Answer 2

Je suis venu ici parce que ma configuration avec Webpack 3 + Sass + React ne fonctionnait pas non plus.

Cependant, dans mon cas, le problème était très stupide.Je dois dire que j'ai créé le projet avec l'outil create-react-app et il définit un fichier webpack.config.dev.js avec une configuration complexe/complète tranquille.

Le problème était que j'ajoutais la règle sassAPRÈS le exclude un et il dit clairement dans les commentaires (HAD) que chaque chargeur après que l'on ne fonctionnera pas.

Il ressemble maintenant à ceci et cela fonctionne:

 { 
     test: /\.scss$/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [require.resolve('css-loader'), require.resolve('sass-loader')], 
     }) 
     }, 
     { 
     exclude: [/\.js$/, /\.html$/, /\.json$/], 
     loader: require.resolve('file-loader'), 
     options: { 
      name: 'static/media/[name].[hash:8].[ext]', 
     }, 
     }, 

L'espoir que cela aide quelqu'un à l'avenir.