web-dev-qa-db-ja.com

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

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

私はwebpackから始めてCSSファイルをインポートしようとしましたが、モジュールが欠落しているというメッセージが表示されます。

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に対して実行されます。

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

最初に（--display-error-detailsを使用する前に）これはパス構造の問題（具体的にはフォワードスラッシュとバックスラッシュ）によるものだと考えていましたが、navbar.cssをフォルダーwebpackのルートに移動しました-同じ問題。

詳細なエラーは、CSSファイルがnodes_module（すべてのディレクトリツリーから探し出される）で検索されることを示しています。どうして？ webpack/static/css/myfile.cssの場所に関連するwebpack.config.jsにあるファイルをインポートする方法

注：requireの代わりにimportを試しても同じ問題が発生します

javascripthtmlcsswebpackwebpack-2
17
WoJ

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

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

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

相対パスを使用したくない場合は、 resolve.modules でモジュールを見つけるためにwebpackが使用するディレクトリを変更するか、 resolve.alias を使用できます。

Webpackの設定で、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']
    }
  ]
}
27
Michael Jungo