SASS

Question

をコンパイルする際にWebPACKのは、私は次のWebPACKファイル持ってエラーを投げる：

ERROR in ./style.scss 
Module parse failed: /Users/alessandro.santese/Desktop/Alessandro/webpack-sass-es6/style.scss Unexpected token (1:5) 
You may need an appropriate loader to handle this file type. 
| body { 
| background-color: #ffa; 
| 
@ ./app.js 1:0-23 

style.scss

body { 
    background-color: #ffa; 

    h1 { 
     color: #000; 
    } 
} 

Answer 1

：私はWebPACKのを実行すると、私は次のエラーを取得する

module.exports = { 
    entry: './app.js', 
    output: { 
     filename: './build.js' 
    }, 
    watch: true, 
    module: { 
     rules: [ 
      { 
       test: /\.js$/, // include .js files 
       enforce: "pre", // preload the jshint loader 
       exclude: /node_modules/, // exclude any and all files in the node_modules folder 
       use: [ 
        { 
         loader: "jshint-loader" 
        } 
       ] 
      } 
     ], 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: 'style-loader!css-loader!sass-loader' 
      }, 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       exclude: /node_modules$/, 
       query: { 
        presets: ['es2015'] 
       } 
      } 
     ] 
    } 
}; 

を

Webpack 2を使用していますか？その場合は、配列内のすべてのルールを設定する必要がありますrules:[]

ローダーの配列の場合は、use:[]プロパティを使用してチェーンする必要があります。このことができます https://webpack.js.org/guides/migrating/#chaining-loaders

希望：

module: { 
    rules: [ 
    { 
     test: /\.js$/, // include .js files 
     enforce: 'pre', // preload the jshint loader 
     exclude: /node_modules/, // exclude any and all files in the node_modules folder 
     use: [ 'jshint-loader' ] 
    }, 
    { 
     test: /\.(sass|scss)$/, 
     use: [ 'style-loader', 'css-loader', 'sass-loader' ] 
    }, 
    ] 
} 

あなたがここでより多くの情報を見つけることができます。だからあなたの場合は

はこのようなものです。