title: How to import CSS files into webpack?
body: <p>According to the <a href="https://webpack.js.org/guides/code-splitting-css/#importing-css" rel="noreferrer">documentation</a>, CSS file should just be <code>import</code>ed. </p>
  
  <p>I am just starting with <code>webpack</code> and tried to import a CSS file but I get a message about a module missing:</p>
  
  <pre><code>D:\Dropbox\dev\jekyll\blog&gt;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
  </code></pre>
  
  <p><code>webpack</code> is ran against the following <code>webpack.config.js</code>:</p>
  
  <pre><code>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' ]
          }]
    }
  }
  </code></pre>
  
  <p>I initially thought (before using <code>--display-error-details</code>) that this was due to some problems with the path structure (specifically forward vs. backward slashes) but then moved <code>navbar.css</code> into the root of the folder <code>webpack</code> - same issue.</p>
  
  <p>The detailed error shows that the CSS file is sought after in <code>nodes_module</code> (which is hunted down though all the directories tree). Why? <strong>How should I then import a file which is in <code>webpack/static/css/myfile.css</code> relative to the location of <code>webpack.config.js</code>?</strong></p>
  
  <p>Note: the same issue exists when trying <code>require</code> instead of <code>import</code></p>