Webpack sass-loaderが、反応jsx文書にインポートされたsassスタイルシートをコンパイルできませんでした。予期しない文字 '@'

Question

私はWebpack 2.5.1,React 15.5.4を使用しています。

私はBootstrap_utilities.scssを反応プロジェクトに使用しようとしています。そして @importステートメントを使って他のsass部分をインポートするため、Webpackはドキュメントをコンパイルしようとするとエラーを報告します。

これは私のエントリmain.jsxのコードのコードです。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import 'bootstrap/scss/_utilities.scss' // this is what causes the error 
import '../stylesheets/components/gallery.scss'; // this one compiles properly if I comment the _utilities.scss import statement. It does not use @import notation. 

class Gallery extends React.Component { 
    render(){ 
    return (<div id="gallery" className="d-flex p-2"> 
      <h1>using bootstrap flex-box</h1> 
      <p>Something something something!</p> 
      <button onClick={() => console.info('You clicked a button')}>Click Me!</button> 
     </div>) 
    } 
} 

これは私のwebpack.config.jsのコードです。

const path = require('path'); 
const webpack = require('webpack'); 
const CommonChunkPlugin = 
require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin'); 

module.exports = { 
    target: 'web', 
    watch: true, 
    devtool: 'source-map', 

    entry: { 
     main: './components/main.jsx', 
     vendor: ['react', 'react-dom'] 
    }, 

    output: { 
     path: path.resolve('..', 'build', 'js'), 
     filename: '[name].js' 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.(css|scss)$/, 
       exclude: /(node_modules)/, 
       use: [ 
        { 
         loader: 'style-loader' 
        }, 
        { 
         loader: 'css-loader', 
         options: { sourceMap: true } 
        }, 
        { 
         loader: 'sass-loader', 
         options: { sourceMap: true } 
        } 
       ] 
      }, 
      { 
       test: /(\.js|\.jsx)$/, 
       exclude: /(node_modules)/, 
       loader: 'babel-loader?cacheDirectory=true', 
       options: { 
        presets: ['es2015', 'react'] 
       } 
      } 
     ] 
    }, 

    plugins: [ 
     new CommonChunkPlugin({ 
      name: 'vendor', 
      filename: 'vendor.js' 
     }) 
    ] 
}; 

あなたが見ることができるように、私はcssとscssファイルをコンパイルするstyle-loader、css-loader、およびsass-loaderを使用しています。

Webpackの実行後に表示されるエラーメッセージです。

... _utilities.scss Unexpected character '@' (1:0) 
You may need an appropriate loader to handle this file type. 
| @import "utilities/align"; 
| @import "utilities/background"; ... 

私はこのpostそして、この他のpostを見てきましたが、彼らは役立ちません。

私は間違っていることはありますか？どうすればこの問題を回避できますか？ありがとう。それは

Answer 1

あなたのお役に立てば幸いです

plugins:[extractPlugin] 

：

Answer 2

は、あなたがこれを必要とする。そして単純にプラグインで、その後

{ 
    test: /\.scss$/, 
    use: extractPlugin.extract({ 
     use: ["css-loader","sass-loader"] 
    }) 
} 

とを入れ

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var extractPlugin = new ExtractTextPlugin({ 
    filename: "main.css" 
}); 

このプラグインを必要とします0を除くディレクトリをSASS/CSSローダーのターゲットとしているため、WebpackはそこからインクルードされているSASSファイルに対して適切なローダーを見つけることができません。

SASS/CSSローダー設定からexcludeプロパティを削除してみます。