根据文档,应该只import
编辑CSS文件。
我刚开始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/static/css/myfile.css
相对于位置的文件webpack.config.js
?
注意:尝试require
而不是尝试时存在相同的问题import
您必须像导入任何JavaScript模块一样导入它们。这意味着,如果导入的文件既不是相对路径(以../
或开头./
),也不是绝对路径(以开头/
),则将其解析为模块。默认情况下,webpack将在node_modules
目录(当前目录和所有父目录)中查找模块。这与Node.js使用的行为相同。
要导入webpack/static/css/myfile.css
,webpack/entry.js
您必须使用相对路径。
import './static/css/myfile.css';
如果您不想使用相对路径,则resolve.modules
可以使用或更改webpack用于查找模块的目录resolve.alias
。
在您的webpack配置中,您还定义了module.rules
和module.loaders
。当webpack看到module.rules
它module.loaders
完全忽略时,您babel-loader
将不会被使用。您只能使用module.rules
。
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句