How to import CSS files into webpack?
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']
}
]
}
WoJ
Updated on August 21, 2021Comments
-
WoJ over 2 years
According to the documentation, CSS file should just be
import
ed.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 followingwebpack.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 movednavbar.css
into the root of the folderwebpack
- 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 inwebpack/static/css/myfile.css
relative to the location ofwebpack.config.js
?Note: the same issue exists when trying
require
instead ofimport