When trying to set up SCSS to run the styling on my React application using Webpack I am presented with the error:
Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js'
and in the browser:
Uncaught Error: Cannot find module "/styles/main.scss"
My webpack.config.js configuration is below:
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"
}
}
My index.js where I am importing the main.scss (producing the error):
var React = require('react');
var ReactDOM = require('react-dom');
var routes = require('./config/routes');
require('./styles/main.scss');
ReactDOM.render(routes, document.getElementById('app'));
All my scss files are in my styles folder, however, I can't seem to import them into my index.js and am returned with the 'Cannot find module' error.'
Here is my folder structure:
- app
- components
- Home.js
- config
- routes.js
- containers
- styles
- components
- main.scss
- index.html
- index.js
- nodemodules
webpack.config.js
package.json
Any help appreciated!
Replace /styles
with
./styles
if index.js
and styles
are in the same folder
EDIT: If you're coming from Google - turns out style-loader
and css-loader
were not installed, make sure of that as well.