Webpack 3: Sass-Loader verwenden und ExtractTextPlugin funktioniert nicht

Question

Ich habe versucht, den Sass-Loader im Webpack zu verwenden und folge dieser Anleitung ->https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less, aber das funktioniert nicht.

Kann mir jemand helfen?

Repository

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

Fehler

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 

Abhängigkeiten

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

Das Problem kommt von der commented style code in your index.html. Die index.html wird von der html-webpack-plugin verarbeitet und aus irgendeinem Grund versucht es immer noch die Anforderung Anrufe (line 9 und line 11) zu verarbeiten. Der Grund könnte der benutzerdefinierte EJS-Lader von html-webpack-plugin sein.

Die einfachste Lösung ist, den kommentierten Code vollständig aus index.html zu entfernen.

Durch Importieren einer .scss Datei wird die von Ihnen konfigurierte Regel angewendet. Aber es scheint, dass die tatsächliche extract-text-webpack-plugin Instanz während dieses Prozesses nicht verfügbar ist. In diesen erforderlichen Aufrufen verwenden Sie einen Inline-Loader. Die konfigurierten Regeln werden jedoch weiterhin auf diese Regeln angewendet. Um zu verhindern, dass andere Lader angewendet werden, können Sie dem Import eine ! voranstellen.

Vom webpack documentation - Rule.enforce:

Alle normalen Lader kann entfallen (außer Kraft gesetzt) ​​werden durch ! in der Anfrage prefixing.

Alle normalen und Pre-Loader können weggelassen werden (überschrieben), indem in der Anforderung -! vorangestellt wird.

Alle normalen, Post- und Pre-Loader können weggelassen werden (außer Kraft gesetzt), indem in der Anforderung !! vorangestellt wird.

Um die CSS richtig in Ihrem HTML verwenden, werden Sie auch css-loader nach den sass-loader verwenden müssen, weil EJS JavaScript an dieser Stelle erwartet, nicht kahl CSS. Die erfordern würde:

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

Es wäre auch besser sein index.scss in Ihrer tatsächlichen Anwendung zu importieren, anstatt der Vorlage, die von html-webpack-plugin verwendet wird.

Answer 2

Ich kam hierher, weil meine Konfiguration mit Webpack 3 + Sass + React auch nicht funktionierte.

Allerdings war das Problem in meinem Fall sehr dumm.Ich muss sagen, ich habe das Projekt mit create-react-app Werkzeug erstellt und es setzt eine webpack.config.dev.js Datei mit einem ruhigen Komplex/vollständige Konfiguration.

Das Problem war, dass ich NACH dem exclude ein und es sagt deutlich in den Kommentaren (hah), dass jeder Lader danach wird man nicht arbeiten, um die sass Regel wurde hinzugefügt.

So sieht es nun so aus und es funktioniert:

 { 
     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]', 
     }, 
     }, 

hoffe, das hilft jemand in der Zukunft.