Module not found: Error: Can't resolve './style.css' in Directory?

I am trying to run the command npm run build but it is not working. and I am getting the error below:

> typescript@1.0.0 build /Users/Prashant/Code/typescript > webpack Hash: c6dbd1eb3357da70ca81 Version: webpack 3.2.0 Time: 477ms Asset Size Chunks Chunk Names bundle.js 2.89 kB 0 [emitted] main [0] ./src/index.js 51 bytes {0} [built] [1] ./src/index.css 290 bytes {0} [built] [failed] [1 error] ERROR in ./src/index.css Module build failed: Unknown word (5:1) 3 | // load the styles 4 | var content = require("!!./index.css"); > 5 | if(typeof content === 'string') content = [[module.id, content, '']]; | ^ 6 | // Prepare cssTransformation 7 | var transform; 8 | @ ./src/index.js 1:0-22 

My web pack config file(webpack.config.js) is:

var path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, use: [ 'css-loader', 'style-loader' ] } ] } }; 

And my CSS file(index.css) is

body { color:red; } 

and my js file index.js is below:

require("./index.css"); alert('this is my alert'); 

I am trying to run the file but it is not working I have checked all the spelling also try to add a lot of other CSS but it is not working, can you please help me how can I solve this issue?

3 Answers

The loaders are applied in reverse order. That means you're applying style-loader first and then pass its result to css-loader. The output of style-loader is JavaScript, which will insert the styles into a <style> tag, but css-loader expects CSS and fails to parse JavaScript as it is not valid CSS.

The correct rule is:

{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } 

I was having the same problem and eventually found that there was a second module rule in the webpack config that was processing *.css files

I solved this by just creating style.css file from the same directory of my js file