Wie importiere ich CSS-Dateien in das Webpack?

Question

Nach der documentation, sollte CSS-Datei nur import ed sein.

Ich beginne gerade mit webpack und versucht, eine CSS-Datei zu importieren, aber ich erhalte eine Meldung über ein Modul fehlt:

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 ist lief gegen die folgenden 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' ] 
     }] 
    } 
} 

I anfänglich gedacht (vor der Verwendung von --display-error-details), dass dies auf einige Probleme mit der Pfadstruktur zurückzuführen war (speziell vorwärts oder rückwärts Schrägstriche), aber dann verschoben navbar.css in die Wurzel o f der Ordner webpack - gleiche Ausgabe.

Der detaillierte Fehler zeigt, dass die CSS-Datei in nodes_module gesucht wird (die durch alle Verzeichnisse Baum gejagt wird). Warum? Wie soll ich dann eine Datei importieren, die sich in webpack/static/css/myfile.css relativ zum Speicherort webpack.config.js befindet?

Hinweis: Das gleiche Problem besteht, wenn require statt import

Answer 1

versuchen, Sie haben sie wie jedes JavaScript-Modul zu importieren. Das heißt, wenn die importierte Datei weder ein relativer Pfad (beginnend mit ../ oder ./) noch ein absoluter Pfad (beginnend mit /) ist, wird sie als Modul aufgelöst. Standardmäßig sucht Webpack nach Modulen im Verzeichnis node_modules (im aktuellen Verzeichnis und allen übergeordneten Verzeichnissen). Dies ist das gleiche Verhalten, das Node.js uses.

Um webpack/static/css/myfile.css in webpack/entry.js zu importieren, müssen Sie einen relativen Pfad verwenden.

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

Wenn Sie nicht über einen relativen Pfad verwenden möchten, können Sie die Verzeichnisse ändern, die webpack ein Modul mit dem resolve.modules finden verwendet oder Sie können resolve.alias verwenden.

---

In Ihrem webpack Config Sie auch beide module.rules und module.loaders definiert. Wenn Webpack module.rules sieht, ignoriert es module.loaders vollständig, so dass Ihre babel-loader nicht verwendet werden würde. Sie sollten nur module.rules verwenden.

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