はどのようにWebPACKの

Question

でコンパイルスタイルに私は私のJSバンドルが動作している

{ 
"name": "v1.0", 
"version": "1.0.0", 
"description": "", 
"main": "app-main.js", 
"scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
}, 
"author": "", 
"license": "ISC", 
"devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "css-loader": "^0.28.7", 
    "extract-text-webpack-plugin": "^3.0.1", 
    "node-sass": "^4.5.3", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.19.0", 
    "webpack": "^3.8.1" 
}, 
"dependencies": { 
    "jquery": "^3.2.1" 
    } 
} 

`

package.json

にこのモジュールを持っていますが、スタイルは、私は元のために1つのバンドルにコンパイルするカント。 main.bundle.css。これは私のjsバンドルは作業が、CSSされていない、私はWebPACKのを起動すると、私はすべてのエラーを持っていけない、私のwebpack.config.js

const path = require('path'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 
module.exports = { 
entry: { 
    'app-main' : './assets/js/app-main.js', 
    'vendor-main': './assets/js/vendor-main.js' 
}, 
output: { 
    path: path.resolve(__dirname, './js'), 
    filename: '[name].bundle.js' 
}, 
module: { 
    rules: [{ 
     test: /\.scss$/, 
     use: [{ 
      loader: "style-loader" 
     }, { 
      loader: "css-loader" 
     }, { 
      loader: "sass-loader", 
      options: { 
       includePaths: ["css/scss/main.scss"] 
      } 
     }] 
    }], 

    loaders: [ 
     { 
      exclude: /node_modules/, 
      loader: 'babel-loader' 
     } 
    ] 
}, 
plugins: [ 
    new ExtractTextPlugin({ 
     filename: 'css/[name].bundle.css', 
     allChunks: true, 
    }), 
] 

}; 

です。どのように私はこの問題を解決することができますか？

Answer 1

あなたのローダルールに機能を抽出するためのコールが欠落しています

const path = require('path'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 
module.exports = { 
    entry: { 
     'app-main': './assets/js/app-main.js', 
     'vendor-main': './assets/js/vendor-main.js' 
    }, 
    output: { 
     path: path.resolve(__dirname, './js'), 
     filename: '[name].bundle.js' 
    }, 
    module: { 
     rules: [{ 
      test: /\.scss$/, 
      use: ExtractTextPlugin.extract({ 
       fallback: "style-loader", 
       use: [{ 
        loader: "style-loader" 
       }, { 
        loader: "css-loader" 
       }, { 
        loader: "sass-loader", 
        options: { 
         includePaths: ["css/scss/main.scss"] 
        } 
       }] 
      }) 
     }], 
     loaders: [ 
      { 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: 'css/[name].bundle.css', 
      allChunks: true, 
     }), 
    ] 
}; 

もう一つは、あなたの.jsファイル内の.scssファイルを必要とすることを忘れないでください。