How to import CSS files into webpack?

Question

According to the documentation, CSS file should just be imported.

I am just starting with webpack and tried to import a CSS file but I get a message about a module missing:

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 is ran against the following 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 initially thought (before using --display-error-details) that this was due to some problems with the path structure (specifically forward vs. backward slashes) but then moved navbar.css into the root of the folder webpack - same issue.

The detailed error shows that the CSS file is sought after in nodes_module (which is hunted down though all the directories tree). Why? How should I then import a file which is in webpack/static/css/myfile.css relative to the location of webpack.config.js?

Note: the same issue exists when trying require instead of import

Answer 1

You have to import them like any JavaScript module. That means, when the imported file is neither a relative path (starting with ../ or ./), nor an absolute path (starting with /), it is resolved as a module. By default webpack will look for modules in the node_modules directory (in the current directory and all parent directories). This is the same behaviour that Node.js uses.

To import webpack/static/css/myfile.css in webpack/entry.js you have to use a relative path.

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

If you don't want to use a relative path, you can change the directories that webpack uses to find a module with the resolve.modules or you can use resolve.alias.

---

In your webpack config you also defined both module.rules and module.loaders. When webpack sees module.rules it ignores module.loaders completely, so your babel-loader wouldn't be used. You should only use module.rules.

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