.sassからwebpackの.cssファイル

Question

私はSASSファイルを持っていますので、webpackを使用してCSSに変換したいのですが、醜い見方をしたくありません。<style></style>タグがドキュメントに追加された場合ロードされ、私はすべての反応コンポーネントにrequire('style!sass!./file.sass')をしたくないのですが、むしろすべてのsassファイルをapp.cssという1つのファイルに変換したいのですが、動作させることはできません。私はこれを手伝ってください。私はwebpackを実行するとwebpack.config.jsファイルは私に次のエラーを与えることを使用して

• WebPACKのバージョン2.2.1

マイwebpack.config.js

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

module.exports = { 
    entry: [ 
     __dirname + '/resources/assets/js/app.js', 
     __dirname + '/resources/assets/sass/app.sass' 
    ], 

    output: { 
     path: __dirname + '/public/js', 
     filename: 'app.js' 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'react'] 
       } 
      }, 

      { 
       test: /\.sass$/, 
       exclude: /node_modules/, 
       loader: ExtractTextPlugin.extract([ 
        'style-loader', 
        'sass-loader' 
       ]) 
      } 
     ] 
    }, 

    plugins: [ 
     new ExtractTextPlugin({ 
      filename: __dirname + '/public/css/app.css', 
      allChunks: true 
     }) 
    ] 
} 

。

C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Chunk.js:59 
       throw new Error("Chunk.entry was removed. Use hasRuntime()"); 
       ^

Error: Chunk.entry was removed. Use hasRuntime() 
    at Chunk.get entry [as entry] (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Chunk.js:59:9) 
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\extract-text-webpack-plugin\index.js:201:13 
    at Array.filter (native) 
    at Compilation.<anonymous> (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\extract-text-webpack-plugin\index.js:200:37) 
    at Compilation.applyPlugins0 (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\tapable\lib\Tapable.js:68:14) 
    at Compilation.seal (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:558:8) 
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compiler.js:474:16 
    at C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\tapable\lib\Tapable.js:225:11 
    at _addModuleChain (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:472:11) 
    at processModuleDependencies.err (C:\Users\me\Documents\projects\web\experiments\3-projectname\node_modules\webpack\lib\Compilation.js:443:13) 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 

npm ERR! Windows_NT 10.0.14393 
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build" 
npm ERR! node v6.9.1 
npm ERR! npm v3.10.8 
npm ERR! code ELIFECYCLE 
npm ERR! 3-projectname@1.0.0 build: `node ./node_modules/webpack/bin/webpack.js` 
npm ERR! Exit status 1 
npm ERR! 
npm ERR! Failed at the 3-projectname@1.0.0 build script 'node ./node_modules/webpack/bin/webpack.js'. 
npm ERR! Make sure you have the latest version of node.js and npm installed. 
npm ERR! If you do, this is most likely a problem with the 3-projectname package, 
npm ERR! not with npm itself. 
npm ERR! Tell the author that this fails on your system: 
npm ERR!  node ./node_modules/webpack/bin/webpack.js 
npm ERR! You can get information on how to open an issue for this project with: 
npm ERR!  npm bugs 3-projectname 
npm ERR! Or if that isn't available, you can get their info via: 
npm ERR!  npm owner ls 3-projectname 
npm ERR! There is likely additional logging output above. 

npm ERR! Please include the following file with any support request: 
npm ERR!  C:\Users\me\Documents\projects\web\experiments\3-projectname\npm-debug.log 

マイSASSファイルこれはあなたがプラグインを設定する方法であるのWebPACK 2のよう

@import './partials/globals' 

Answer 1

：

// In the loaders (now 'rules') array 
{ 
    test: /\.sass$/, 
    exclude: /node_modules/, 
    use: ExtractTextPlugin.extract({ 
    fallbackLoader: "style-loader", // Will inject the style tag if plugin fails 
    loader: "css-loader!sass-loader", 
    }), 
} 

plugins: [ 
    new ExtractTextPlugin({ filename: 'bundle.css', disable: false, allChunks: true }) 
] 

また、SASS後CSSローダーを使用することを忘れていた

ローダ。

Extract Textプラグインのv2がインストールされていることを確認してください。 V1はWebPACKのでは動作しません。2.それはあなたがwebpack2を使用している場合、私は、@epiquerasに同意1. https://webpack.js.org/guides/migrating/

Answer 2

が、あなたはまた、バージョン2.xを使用する必要がWebPACKのために作られたようなあなたのWebPACKの設定が見え

extract-text-webpack-pluginの場合、ビルドに失敗します。

あなたの場合は、このようになります。

module.exports = { 
entry: [ 
    __dirname + '/resources/assets/js/app.js', 
    __dirname + '/resources/assets/sass/app.sass' 
], 

output: { 
    path: __dirname + '/public/js', 
    filename: 'app.js' 
}, 

module: { 
    rules: [ // from 'loaders' to 'rules' 
     { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      exclude: /node_modules/, 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }, 

     { 
      test: /\.sass$/, 
      exclude: /node_modules/, 
      loader: ExtractTextPlugin.extract({ 
       fallbackLoader: 'style-loader', 
       loader: ['style-loader','sass-loader'] 
      }) 
     } 
    ] 
}, 

plugins: [ 
    new ExtractTextPlugin('bundle.css') // what the output file (css) is going to be 
] 

}