2017-01-19 3 views
2

Ich muss von .scss Datei zu .css Datei im angegebenen Ordner übertragen. Ich benutze extract-text-webpack-plugin, um die Datei zu extrahieren, aber es hat nicht funktioniert.Extrahieren Sie .scss-Datei in .css mit webpack 2

das ist mein webpack.config.js

var webpack = require('webpack') 
var path = require('path') 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 

var env = process.env.NODE_ENV 
var config = { 
    entry: path.join(__dirname, 'src/index.js'), 
    resolve: { 
    extensions: ['.js', '.jsx'] 
    }, 
    module: { 
    rules: [ 
     { 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets: ['react', ['es2015', { modules: false }], 'stage-0'] 
      } 
     }, 
     resource: { 
      exclude: /(node_modules|bower_components)/, 
      test: /.jsx?$/ 
     } 
     }, { 
     use: { 
      loader: ExtractTextPlugin.extract({ 
      fallbackLoader: "style-loader", 
      loader: "css-loader!sass-loader", 
      }) 
     }, 
     resource: { 
      test: /.scss?$/ 
     } 
     } 
    ] 
    } 
} 

switch (env) { 
    case 'production': 
    Object.assign(config, { 
     output: { 
     path: path.join(__dirname, 'build'), 
     publicPath: 'build', 
     filename: 'bundle.min.js' 
     }, 
     devtool: false, 
     plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify('production'), 
      '__DEVTOOLS__': false 
     }), 
     new webpack.optimize.OccurrenceOrderPlugin(), 
     new webpack.optimize.UglifyJsPlugin({ 
      compress: { 
      warnings: false, 
      screw_ie8: true 
      }, 
      mangle: false, 
      comments: false 
     }) 
     ] 
    }) 
    break 

    case 'development': 

    default: 
    Object.assign(config, { 
     output: { 
     path: path.join(__dirname, 'build'), 
     publicPath: 'build', 
     filename: 'bundle.js', 
     chunkFilename: '[name].js' 
     }, 
     devtool: 'inline-sourcemap', 
     plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new ExtractTextPlugin('tahu.css') 
     ], 
     devServer: { 
      contentBase: __dirname + '/' 
     } 
    }) 
    break 
} 

module.exports = Object.assign({}, config); 

dies meine Abhängigkeiten ist

"css-loader": "^0.26.1", 
"extract-text-webpack-plugin": "2.0.0-beta.5", 
"node-sass": "^4.3.0", 
"sass-loader": "^4.1.1", 
"style-loader": "^0.13.1", 
"webpack": "2.2.0-rc.7", 

Wer kann mir helfen?

Antwort

3

Schließlich weiß ich, warum ich die .css Build-Datei nicht habe. Weil ich vergessen habe, .scss Datei in meine .js Datei zu verlangen.