web-dev-qa-db-fra.com

Comment importer des fichiers CSS dans WebPack?

Selon la documentation , le fichier CSS devrait simplement être imported.

Je viens juste de commencer avec webpack et j'ai essayé d'importer un fichier CSS, mais je reçois un message concernant un module manquant:

D:\Dropbox\dev\jekyll\blog>webpack --display-error-details
Hash: 0cabc1049cbcbdb8d134
Version: webpack 2.6.1
Time: 74ms
   Asset     Size  Chunks             Chunk Names
build.js  2.84 kB       0  [emitted]  main
   [0] ./webpack/entry.js 47 bytes {0} [built]

ERROR in ./webpack/entry.js
Module not found: Error: Can't resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack'
resolve 'navbar.css' in 'D:\Dropbox\dev\jekyll\blog\webpack'
  Parsed request is a module
  using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./webpack)
    resolve as module
      D:\Dropbox\dev\jekyll\blog\webpack\node_modules doesn't exist or is not a directory
      D:\Dropbox\dev\jekyll\node_modules doesn't exist or is not a directory
      D:\Dropbox\dev\node_modules doesn't exist or is not a directory
      D:\Dropbox\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Dropbox\dev\jekyll\blog\node_modules
        using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules)
          using description file: D:\Dropbox\dev\jekyll\blog\package.json (relative path: ./node_modules/navbar.css)
            as directory
              D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css doesn't exist
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.js doesn't exist
            .json
              Field 'browser' doesn't contain a valid alias configuration
              D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.json doesn't exist
[D:\Dropbox\dev\jekyll\blog\webpack\node_modules]
[D:\Dropbox\dev\jekyll\node_modules]
[D:\Dropbox\dev\node_modules]
[D:\Dropbox\node_modules]
[D:\node_modules]
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css]
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css]
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.js]
[D:\Dropbox\dev\jekyll\blog\node_modules\navbar.css.json]
 @ ./webpack/entry.js 1:0-21

webpack est exécuté sur le suivant webpack.config.js:

const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'webpack/entry.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'build.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ],
    rules: [{
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
        }]
  }
}

J'ai d'abord pensé (avant d'utiliser --display-error-details) que cela était dû à des problèmes avec la structure du chemin (en particulier les barres obliques inversées), mais a ensuite été déplacé navbar.css à la racine du dossier webpack - même problème.

L'erreur détaillée montre que le fichier CSS est recherché dans nodes_module _ (qui est traqué par tous les répertoires). Pourquoi? Comment devrais-je alors importer un fichier qui se trouve dans webpack/static/css/myfile.css par rapport à l'emplacement de webpack.config.js?

Remarque: le même problème existe lorsque vous essayez require au lieu de import

javascripthtmlcsswebpackwebpack-2
17
WoJ

Vous devez les importer comme n'importe quel module JavaScript. Cela signifie que lorsque le fichier importé n’est ni un chemin relatif (commençant par ../ ou ./), ni un chemin absolu (commençant par /), il est résolu en tant que module. Par défaut, Webpack recherchera des modules dans le node_modules répertoire (dans le répertoire actuel et tous les répertoires parents). C'est le même comportement que Node.js utilise .

Importer webpack/static/css/myfile.css dans webpack/entry.js vous devez utiliser un chemin relatif.

import './static/css/myfile.css';

Si vous ne souhaitez pas utiliser de chemin relatif, vous pouvez modifier les répertoires utilisés par Webpack pour rechercher un module avec le resolve.modules ou vous pouvez utiliser resolve.alias .

Dans votre configuration Webpack, vous avez également défini à la fois module.rules et module.loaders. Quand webpack voit module.rules il ignore module.loaders complètement, donc votre babel-loader ne serait pas utilisé. Vous ne devriez utiliser que module.rules.

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
27
Michael Jungo