не удалось создать файл CSS sass-loader webpack

Question

Я пытаюсь использовать sass-loader для преобразования SCSS-файлов в css (обязательно для физического файла). Стили применяются, но не могут видеть сгенерированные файлы .css.

//webpack.config.js 

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: __dirname + '/public', 
     filename: 'bundle.js' 
    }, 
    devServer: { 
     contentBase: __dirname + '/public' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
      {test: /\.scss$/, loader: ExtractTextPlugin.extract('css-loader!sass-loader')} 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("style.css") 
    ] 
} 

Полный исходный код доступен на github repo

Answer 1

Я видел исходный код. Я уверен, что из-за того, что вы все еще используете синтаксис webpack version 1, но то, что вы установили, было webpack v2. Webpack2 имеет другой синтаксис, чем предыдущая.

Использование webpack v2 ваших webpack.config.js будет выглядеть следующим образом:

module: { 
     rules: [ // from 'loaders' to 'rules' 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
      }, 
      { 
       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 
    ] 

Надеется, что это помогает.