web-dev-qa-db-fra.com

Module non trouvé: Erreur: Impossible de résoudre "./style.css" dans l'annuaire?

J'essaie d'exécuter la commande npm run build mais cela ne fonctionne pas. et je reçois l'erreur ci-dessous:

> [email protected] 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

Le fichier de configuration de mon pack Web (webpack.config.js) est:

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

Et mon fichier CSS (index.css) est

body {
    color:red;
}

et mon fichier js index.js est ci-dessous:

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

J'essaie de lancer le fichier, mais cela ne fonctionne pas. J'ai vérifié toutes les orthographes et essayer d'ajouter beaucoup d'autres CSS, mais cela ne fonctionne pas. Pouvez-vous m'aider, comment puis-je résoudre ce problème?

csswebpackcss-loader
7
Prashant Barve

Les chargeurs sont appliqués dans l'ordre inverse. Cela signifie que vous appliquez d'abord style-loader, puis transmettez son résultat à css-loader. La sortie de style-loader est JavaScript, qui insérera les styles dans une balise <style>, mais css-loader attend CSS et ne parvient pas à analyser JavaScript car il ne s'agit pas d'une CSS valide.

La règle correcte est:

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

J'avais le même problème et j'ai finalement constaté qu'il y avait une deuxième règle de module dans la configuration de Webpack qui traitait les fichiers * .css

1
HisDivineShadow