使用Webpack，SASS和React在'main.scss'上报错'找不到模块'

Question

当尝试设置SCSS以使用Webpack在我的React应用程序上运行样式时，出现以下错误：

Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js'

并在浏览器中：

Uncaught Error: Cannot find module "/styles/main.scss"

我的webpack.config.js配置如下：

var HtmlWebpackPlugin = require('html-webpack-plugin');-
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},{
            test: /\.scss$/,
            loaders: ['style', 'css', 'sass']
        }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

我的package.json：

    {
  "name": "get-cooked",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "prod": "webpack -p"
  },
  "author": "Sachin Karia",
  "license": "ISC",
  "dependencies": {
    "classnames": "^2.2.5",
    "react": "^0.14.6",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5"
  },
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-react": "^6.3.13",
    "html-webpack-plugin": "^2.7.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.2",
    "webpack": "2.2.1",
    "webpack-dev-server": "^1.14.1"
  }
}

我要在其中导入main.scss的index.js（产生错误）：

var React = require('react');
var ReactDOM = require('react-dom');
var routes = require('./config/routes');
require('./styles/main.scss');

ReactDOM.render(routes, document.getElementById('app'));

我所有的scss文件都在我的样式文件夹中，但是，我似乎无法将它们导入到index.js中，并返回“找不到模块”错误。

这是我的文件夹结构：

- app
  - components
    - Home.js
  - config
    - routes.js
  - containers
  - styles
    - components
    - main.scss
  - index.html
  - index.js
- nodemodules
webpack.config.js
package.json

任何帮助表示赞赏！

Answer 1

替换/styles为

./styles 

如果index.js和styles在同一个文件夹中