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!
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ersetzen
/styles
mitwenn
index.js
undstyles
im selben Ordner/styles/main.scss
ist ein absoluter Pfad, so wird es Aussehen, in der Wurzel des Dateisystems. Sie möchten einen relativen Pfad verwenden:Dies erfordert
styles
im gleichen Verzeichnis wieindex.js
. Also, wenn Sie Ihre Projektstruktur sieht wie folgt aus:Würden Sie brauchen, um die nächsthöhere Verzeichnis:
In Fall, dass Sie möchten, um Pfade relativ zum Hauptverzeichnis deines Projekts, könnten Sie die beheben Optionen in Ihrem webpack config.
Stellt sich heraus, das ist eine loader-Problem ist und nicht die richtigen node-Modulen. Einfach läuft das Skript unten wird die Frage:
als auch mit hinzufügen von "Stil-loader", "css-loader" und "sass-loader" zu Webpack eher als "Stil","css","sass".
Dies ist hauptsächlich ein webpack zugehörige Thema und erscheinen auf jedem webpack zugehörige app
Einfach
"css-loader": "^0.28.6", "style-loader": "^0.18.2"
in Ihrem Paket.json"devDependencies": {...}
- Datei, und führen Sienpm update
.Spielte ich mit CI und Automatisierung in VSTS für ReactJS und auto deploy SharePoint-Online-Web-Teilen gemacht mich update Code VS IDE, Bearbeiten Gulp-Datei, CD,MK ' s... etc. Bei der erneuten öffnung VS Code, den ich nicht bemerkt, ich bin jetzt in ein diff, Dir, wie gezeigt, in meinem Terminal-Fenster. Was ist schlimmer? Ich bin in ein anderes Verzeichnis, das nicht in der Nähe meines Stamm-node_modules-Ordner! Ich war hier zunächst:
../node_modules/- << This is my initial Node mod root!!!
Während jetzt war ich in:
HINWEIS: bevor Sie fortfahren, notieren Sie die Knoten -, IDE -, reagieren,ES, Module etc. in Fall müssen Sie ein roll-back.
Lösung?
Cleans
undBuilds
hoffentlich bekommenServed
. Schlucken diese.npm update
Nun werden Sie node_modules wurde lokal Hinzugefügt. Gut oder schlecht? Ich weiß nicht, aber es funktioniert! 🙂