Webpack 3: Use sass-loader and ExtractTextPlugin doesn't work -

i've been trying use sass-loader in webpack , follow instructions -> https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-less not working.

can me?

repository

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

error

error in   error: child compilation failed:   module build failed: error: "extract-text-webpack-plugin" loader used without corresponding plugin, refer https://github.com/webpack/extract-text-webpack-plugin usage example    - error: "extract-text-webpack-plugin" loader used without corresponding plugin, refer https://github.com/webpack/extract-text-webpack-plugin usage example 

dependencies

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

the issue comes commented style code in index.html. index.html processed html-webpack-plugin , reason still tries process require calls (line 9 , line 11). reason custom ejs loader of html-webpack-plugin.

the easiest solution remove commented code index.html.

by importing .scss file, rule configured gets applied it. seems actual extract-text-webpack-plugin instance isn't available during process. using inline loader in these require calls, configured rules still applied that. prevent other loaders being applied, can prefix import !.

from webpack documentation - rule.enforce:

all normal loaders can omitted (overridden) prefixing ! in request.

all normal , pre loaders can omitted (overridden) prefixing -! in request.

all normal, post , pre loaders can omitted (overridden) prefixing !! in request.

to able use css correctly in html you'll need use css-loader after sass-loader, because ejs expects javascript @ place, not bare css. require become:

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

it better import index.scss in actual application instead of template used html-webpack-plugin.