Webpack 3：sass-loaderを使用し、ExtractTextPluginが動作しない

Question

webpackでsass-loaderを使用しようとしていますが、この手順に従います - >https://github.com/webpack-contrib/extract-text-webpack-plugin#extracting-sass-or-lessしかしこれは動作しません。

誰でも助けてくれますか？

リポジトリ

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

エラー

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 

依存

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

問題がcommented style code in your index.htmlから来ています。 index.htmlはhtml-webpack-pluginによって処理されますが、なんらかの理由で依然として要求コール（line 9およびline 11）を処理しようとします。その理由は、html-webpack-pluginのカスタムEJSローダーである可能性があります。

最も簡単な解決策は、コメント付きコードをindex.htmlから完全に削除することです。

.scssファイルをインポートすると、設定したルールが適用されます。しかし、実際のextract-text-webpack-pluginインスタンスはそのプロセス中に利用できないようです。これらの必須コールでインラインローダーを使用していますが、設定済みのルールは引き続き適用されます。他のローダーが適用されないようにするには、インポートの先頭に!を付けることができます。 webpack documentation - Rule.enforceから

：

すべての通常のローダーは、リクエストに!を付けることによって（上書き）を省略することができます。

要求に-!という接頭辞を付けることで、すべての標準ローダーとプリローダーを省略（上書き）することができます。

要求に!!という接頭辞を付けることで、すべてのノーマル、ポスト、およびプリローダを省略（オーバーライド）することができます。

あなたもEJSがこの場所ではなく、裸のCSSでJavaScriptを想定しているため、sass-loader後css-loaderを使用する必要がありますあなたのHTMLで正しくCSSを使用できるようにします。必要になるだろう：

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

また、代わりにhtml-webpack-pluginで使用されるテンプレートの実際のアプリケーションでindex.scssをインポートする方が良いだろう。

Answer 2

Webpack 3 + Sass + Reactでの設定が機能していないため、ここに来ました。

しかし、私の場合、問題は非常にばかげていました。create-react-appツールを使用してプロジェクトを作成し、それが静かな複雑な/完全な設定でwebpack.config.dev.jsファイルを設定すると言う必要があります。

問題は、私は AFTER exclude 1をsassルールを追加していることであり、それは明らかにその1つの後のすべてのローダが動作しないことコメント（ほら）で述べています。

だから、それはこのようになりました見て、それが動作します：

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

が、これは将来的に誰かに役立ちます願っています。