Module Not Found: Error: Can't Resolve '. /Style. Css' in Directory?

Question

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?

Accepted Answer

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

Answer 2

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

Answer 3

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

Module Not Found: Error: Can't Resolve '. /Style. Css' in Directory?

3 Answers

Must Read

Your Answer

Maya Lin-Takahashi

Module Not Found: Error: Can't Resolve '. /Style. Css' in Directory?

3 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Maya Lin-Takahashi