2016-04-05 29 views
0

webpackを使ってsassからcssにコンパイルする際に問題があります。 webpackでscssファイルをコンパイルすると、結果として得られるCSSはscssファイルと同じになり、scssファイルはエントリポイントの1つになります。これは、何らかの形でサスローダーの実行に失敗したことを意味しますが、エラーメッセージはありません。セットアップに何が問題なのかよく分かりません。私は、Window 7とUbuntu 15で試してみましたが、問題はWebpack - sassをコンパイルした後、結果として得られるCSSはscssファイルと同じです

main.js

import 'scss/main.scss'; 

main.scss持続:

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

bundle.css(コンパイル済みの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') ] 
    }] 
    } 
}; 

コマンドメッセージ:

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] 

答えて

0

あなたExtractTextPlugin.extract文を確認してください。私はあなたが必要だと思う

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

現在の宣言では、これはraw-loaderを処理し、sass-loaderをスキップします。したがって、出力。

+0

はい、あなたは正しいです。問題は解決された !!しかし、私はその違いを本当に理解していません。私は '' raw!sass''は '' raw ''、 'sass''の単なる構文砂糖であると考えました。これら2つのステートメントの違いは何ですか? – deepone

+0

これはプラグインの設計と関係があります。残念ながらwebpackの残りの部分とは一貫していません。 –

関連する問題