Sass-Loader＆Webpack 3.6 - 予期しないトークン '。' on .scss parse

Question

私はscssファイルを解析するためにwebpack 3.6を使用しようとしています。 import styles from './index.scss'; よう.jsにインポートされているしかし、私はビルドに次のエラーを取得する：

SyntaxError: D:/Stack/Hespen Development/Website/react-boilerplate/src/components/home/index.scss: Unexpected token (3:0) 
    1 | $color: green; 
    2 | 
> 3 | .home { 
    |^
    4 | display: flex; 
    5 | flex-direction: column; 
    6 | align-items: center; 

このcurrenltyは私webpack.config

const path = require('path'); 
const webpack = require('webpack'); 

module.exports = { 
    entry: [ 
     'webpack-hot-middleware/client', 
     path.resolve(__dirname, 'src'), 
    ], 
    output: { 
     path: path.resolve(__dirname, 'src'), 
     filename: 'bundle.js', 
     publicPath: '/', 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NamedModulesPlugin(), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       NODE_ENV: JSON.stringify('development'), 
       WEBPACK: true, 
      }, 
     }), 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       use: { 
        loader: 'babel-loader', 
        query: { 
         presets: ['react-hmre'], 
        }, 
       }, 
       include: path.resolve(__dirname, 'src'), 
      }, 
      { 
       test: /\.scss$/, 
       use: [{ 
        loader: "style-loader" // creates style nodes from JS strings 
       }, { 
        loader: "css-loader" // translates CSS into CommonJS 
       }, { 
        loader: "sass-loader" // compiles Sass to CSS 
       }] 
      } 
     ], 
    }, 
}; 

である彼らのGithub page

{ 
"name": "react-boilerplate", 
    "version": "0.0.1", 
    "main": "src/index.js", 
    "scripts": { 
    "lint": "eslint ./src", 
    "start": "cross-env NODE_ENV=development babel-node ./server.js ", 
    "build": "rimraf dist && webpack --config ./webpack.config.prod.js", 
    "serve": "cross-env NODE_ENV=production babel-node ./server.js" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^7.1.2", 
    "babel-cli": "^6.10.1", 
    "babel-core": "^6.10.4", 
    "babel-eslint": "^8.0.0", 
    "babel-loader": "^7.1.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-react-hmre": "^1.1.1", 
    "babel-preset-stage-0": "^6.5.0", 
    "copy-webpack-plugin": "^4.0.1", 
    "cross-env": "^5.0.1", 
    "css-loader": "^0.28.4", 
    "eslint": "^4.3.0", 
    "eslint-plugin-babel": "^4.1.2", 
    "eslint-plugin-react": "^7.1.0", 
    "express": "^4.14.0", 
    "extract-text-webpack-plugin": "^3.0.0", 
    "history": "^4.7.2", 
    "node-sass": "^4.5.3", 
    "postcss-loader": "^2.0.6", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "react-redux": "^5.0.5", 
    "react-router": "^4.2.0", 
    "react-router-dom": "^4.1.2", 
    "react-router-redux": "^5.0.0-alpha.6", 
    "redux": "^3.5.2", 
    "rimraf": "^2.5.4", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.18.2", 
    "webpack": "^3.6.0", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-hot-middleware": "^2.12.2" 
    }, 
    "dependencies": { 
    "eslint-config-airbnb": "^15.1.0", 
    "eslint-plugin-import": "^2.7.0", 
    "eslint-plugin-jsx-a11y": "^6.0.2" 
    } 
} 

に説明したように、これはあります

なぜこれを取得しますかUnexpected symbolエラー？

Answer 1

module.rules代わりに使用します私の問題は、webpackを--watchで実行していて、sass-loaderを追加したようなpackage.config.jsへの変更が取得されなかったことです。 webpackを再起動した後、コンパイルは正常に機能しました。

Answer 2

Webpack 3.xはプロパティとして廃止されました。 - のためのソリューション

{ 
    test: /\.(css|scss)$/, 
    use: ExtractTextPlugin.extract({ 
     fallback: 'style-loader', 
     use: [{ 
       loader: 'css-loader', 
       options: { 
        modules: true, 
        importLoaders: 1, 
        sourceMap: true, 
       }, 
      }, 
      { 
       loader: 'postcss-loader', 
       options: { 
        sourceMap: true, 
       }, 
      }, 
      { 
       loader: 'sass-loader', 
       options: { 
        sourceMap: true, 
       }, 
      }, 
     ], 
    }), 
}, 

Answer 3

誰にもこの同じエラーメッセージに出くわす場合：これは一緒にすでにmodule.rulesを使用して、言及されたもので、トリックをした

module: { 
    rules: [ 
     { 
      test: /\.js$/, 
      use: { 
...