CSSファイルをwebpackにインポートするには？

Question

documentationによると、CSSファイルはimportである必要があります。

は、私はちょうどwebpack始まるとCSSファイルをインポートしようとしたが、私は不足しているモジュールについてのメッセージを取得しています：

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：

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がwebpack.config.js次に対して実行されます（--display-error-detailsを使用する前に）これはパス構造の問題（具体的には前方対後方スラッシュ）に起因すると考えられていましたが、次にnavbar.cssをルートoに移動しましたfフォルダwebpack - 同じ問題。

詳細なエラーは、CSSファイルがnodes_moduleで検索されていることを示しています（これは、すべてのディレクトリツリーを介して検索されます）。どうして？ webpack/static/css/myfile.cssにあるファイルをwebpack.config.jsの相対位置にインポートするにはどうすればよいですか？

注：あなたは、任意のJavaScriptのモジュールのようにそれらをインポートする必要がrequire代わりimport

Answer 1

でしようとしたときに同じ問題が存在します。つまり、インポートされたファイルが（../または./で始まる）相対パスでもなく、絶対パス（/で始まる）でもない場合、モジュールとして解決されます。デフォルトでは、webpackはnode_modulesディレクトリ（現在のディレクトリとすべての親ディレクトリ）のモジュールを探します。これはNode.js usesと同じ動作です。

webpack/static/css/myfile.cssをwebpack/entry.jsにインポートするには、相対パスを使用する必要があります。あなたは相対パスを使用しない場合

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

、あなたはWebPACKのresolve.modulesでモジュールを見つけるために使用するディレクトリを変更したり、resolve.aliasを使用することができます。あなたもmodule.rulesとmodule.loadersの両方を定義し、あなたのWebPACKの設定で

---

。ウェブパックでmodule.rulesと表示されると、module.loadersが完全に無視されるため、babel-loaderは使用されません。 module.rulesのみ使用してください。

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