Webpack - Nach dem Kompilieren von Sass, das resultierende CSS ist das selbe wie die SCS-Datei

Question

Ich habe Probleme mit dem kompilieren von Sass zu CSS mit Webpack. Nach dem Kompilieren der scss-Datei mit webpack ist die resultierende css identisch mit der scss-Datei, in der die scss-Datei einer der Einstiegspunkte ist. Es bedeutet, dass sass-loader nicht ausgeführt werden kann, während es keine Fehlermeldung darüber gibt. Ich bin mir nicht sicher, was mit meinem Setup nicht stimmt. Ich habe versucht, mit Windows 7 und Ubuntu 15 und das Problem weiterhin besteht

main.js

import 'scss/main.scss'; 

main.scss:

$color : red; 
body { 
    background-color: $color; 
} 

bundle.css (Die kompilierte css):

$color : red; 
body { 
    background-color: $color; 
} 

webpack.config.js

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

module.exports = { 
    devtool: 'eval', 
    resolve: { 
    root: path.resolve(__dirname), 
    alias: { 
     js: 'src/javascript', 
     scss: 'src/stylesheet', 
    }, 
    extensions: ['', '.js', '.jsx'] 
    }, 
    entry: [ 
    './src/javascript/main.js' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist', 'static'), 
    filename: 'bundle.js', 
    chunkFilename: "[chunkhash].js", 
    publicPath: '/static/' 
    }, 
    plugins: [ 
    new ExtractTextPlugin("bundle.css") 
    ], 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     loaders: ['babel'], 
     include: [ path.join(__dirname, 'src', 'javascript') ] 
    }, 
    { 
     test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 'raw-loader', 'sass-loader'), 
     include: [ path.join(__dirname, 'src', 'stylesheet') ] 
    }] 
    } 
}; 

Befehlsnachricht:

Version: webpack 1.12.14 
Time: 8406ms 
    Asset  Size Chunks    Chunk Names 
bundle.js 970 bytes  0 [emitted] main 
bundle.css 22 bytes  0 [emitted] main 
chunk {0} bundle.js, bundle.css (main) 110 bytes [rendered] 
    [0] multi main 28 bytes {0} [built] 
    [1] ./src/javascript/main.js 41 bytes {0} [built] 
    [2] ./src/stylesheet/main.scss 41 bytes {0} [built] 
Child extract-text-webpack-plugin: 
    chunk {0} extract-text-webpack-plugin-output-filename 43 bytes [rendered] 
     [0] ./~/raw-loader!./src/stylesheet/main.scss 43 bytes {0} [built] 

Answer 1

Überprüfen Sie Ihre ExtractTextPlugin.extract Aussage. Ich glaube, du brauchst

ExtractTextPlugin.extract('style', 'raw!sass') 

In der aktuellen Deklaration verarbeitet es durch Raw-Loader und überspringt Sass-Loader. Daher die Ausgabe.