die Fehlermeldung 'cannot find module' auf 'main.scss' mit Webpack, SASS, und Reagieren

Wenn Sie versuchen, SCSS, um führen Sie das styling auf meinen Reagieren-Anwendung mit Webpack bin ich mit dem Fehler:

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

und in den browser:

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

Meine webpack.config.js die Konfiguration liegt unter:

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

Mein Paket.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"
  }
}

Meine index.js wo bin ich den Import der wichtigsten.scss (die den Fehler produziert):

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

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

Alle meine scss-Dateien in meinem Ordner styles, jedoch kann ich nicht scheinen, um Sie zu importieren in meine index.js und bin zurückgekehrt mit dem 'Nicht finden kann Modul' Fehler.'

Hier ist meine Ordner-Struktur:

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

Jede Hilfe dankbar!

InformationsquelleAutor Sachin Karia | 2017-02-26
Schreibe einen Kommentar