How to import CSS files into webpack?

Question

According to the documentation , the CSS file should be import ed.

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

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

Initially, I thought (before using --display-error-details ) that this was due to some problems with the path structure (in particular, compared to navbar.css ), but then moved navbar.css to the root of the webpack folder - the same a problem.

A detailed error indicates that the CSS file is requested in nodes_module (which traces the entire directory tree). What for? How can I then import a file that is in webpack/static/css/myfile.css relative to the location of webpack.config.js ?

Note. The same problem occurs when you try require instead of import

Answer 1

You need to import them, like any JavaScript module. This means that if the imported file is not a relative path (starting with ../ or ./ ), as well as 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 in all parent directories). This is the same behavior that Node.js uses .

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

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

If you do not want to use the relative path, you can change the directories that webpack uses to find the module with resolve.modules or you can use resolve.alias .

---

In your webpack configuration, you also defined both module.rules and module.loaders . When webpack sees module.rules , it completely ignores module.loaders , so your babel-loader will not be used. You must use module.rules .

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