webpack导入css到html,如何将CSS文件导入到webpack中？

我刚开始用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移动到根o f文件夹webpack - 同样的问题。

详细的错误表明，在nodes_module之后寻找CSS文件(这是通过所有目录树追捕的)。为什么？ 我应该如何导入webpack/static/css/myfile.css相对于webpack.config.js的位置的文件？

注：尝试的require代替import

2017-06-10

WoJ