如何将CSS文件导入到webpack中?
如何将CSS文件导入到webpack中?
根据文档,CSS文件应该只需进行import
。我刚开始使用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.config.js
位置为webpack/static/css/myfile.css
的文件呢?注意:使用require
而不是import
时也存在相同问题。