Reactjs 错误'；找不到模块'；在'；main.scss'；使用Webpack、SASS和React

当尝试设置SCS以使用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'

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

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

在浏览器中：

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]
};

My 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的My index.js（产生错误）：

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

以下是我的文件夹结构：

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

---

感谢您的帮助

将

/style

替换为

./styles 

如果

index.js

和

style

在同一文件夹中

---

编辑：如果您来自谷歌-发现

style loader

和

css loader

未安装，请确保安装正确。

/styles/main.scss

是一个绝对路径，因此它将查找文件系统的根目录。要使用相对路径：

require('./styles/main.scss');

这要求

style

与

index.js

位于同一目录中。因此，如果您的项目结构如下所示：

- styles/
  - main.scss
- app/
  - index.js

您需要进入一个目录：

require('../styles/main.scss');

---

如果要使用相对于项目根目录的路径，可以使用webpack配置中的选项。

结果表明这是加载程序问题，没有正确的节点模块。只需运行以下脚本即可解决此问题：

npm install style-loader css-loader --save-dev 

---

以及在网页中添加“样式加载器”、“css加载器”和“sass加载器”，而不是“样式”、“css”、“sass”。

这主要是一个与网页相关的问题，可以出现在任何与网页相关的应用程序上

---

只需在您的软件包中包含

“css加载器”：“^0.28.6”，“样式加载器”：“^0.18.2”

“devdependences”：{…}文件并运行

npm update

我在VSTS中为ReactJS和自动部署到SharePoint Online Web部件玩CI和自动化游戏，这让我更新了VS code IDE，编辑了Gulp文件、CD、MK。。。等重新打开VS代码时，我没有注意到我现在处于一个diff Dir中，如我的终端窗口所示。更糟的是什么？我在另一个目录中，它不在我的根节点\u modules文件夹附近！最初我在这里：

。/node\u modules/-我添加了./style，但是仍然遇到相同的错误。index.js和styles在同一个文件夹中。因此它现在的内容是：require（'./styles/main.scss'）？现在的错误是什么？是的，控制台中的错误是相同的：“未找到模块：错误：无法解析“/Users/sachinkaria/Workspace/GC'@./app/index.js 4:0-29@multi./app/index.js”中的“style”，而在我的浏览器控制台中的错误是：未捕获错误：找不到模块”。/styles/main.scss“在webpackMissingModuleWell中，我被难住了。有没有可能用您的文件夹和路径更新问题？这是加载程序问题，没有安装样式加载程序和css加载程序。我的index.js文件与我的样式文件夹位于同一目录中。我已经添加了./style，但是仍然会遇到相同的错误。
../src/webparts/az

../node_modules/
../src/webparts\SPWPTest\src\webparts\az