[英]How to import CSS files into webpack?
According to thedocumentation , CSS file should just be import
ed.根据文档,应该只
import
CSS 文件。
I am just starting with webpack
and tried to import a CSS file but I get a message about a module missing:我刚从
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
is ran against the following webpack.config.js
: 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' ]
}]
}
}
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 moved navbar.css
into the root of the folder webpack
- same issue.我最初认为(在使用
--display-error-details
之前)这是由于路径结构存在一些问题(特别是正斜杠与反斜杠),但随后将navbar.css
移到了文件夹webpack
的根目录中 - 同样的问题。
The detailed error shows that the CSS file is sought after in nodes_module
(which is hunted down though all the directories tree).详细错误显示在 nodes_module 中查找
nodes_module
文件(通过所有目录树查找)。 Why?为什么? How should I then import a file which is in
webpack/static/css/myfile.css
relative to the location of webpack.config.js
?然后我应该如何导入
webpack/static/css/myfile.css
相对于webpack.config.js
位置的文件?
Note: the same issue exists when trying require
instead of import
注意:尝试
require
而不是import
时存在同样的问题
You have to import them like any JavaScript module. 您必须像任何JavaScript模块一样导入它们。 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). 默认情况下,webpack将在
node_modules
目录中查找模块(在当前目录和所有父目录中)。 This is the same behaviour that Node.js uses . 这与Node.js使用的行为相同。
To import webpack/static/css/myfile.css
in webpack/entry.js
you have to use a relative path. 要在
webpack/entry.js
导入webpack/static/css/myfile.css
,您必须使用相对路径。
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
. 如果你不想使用相对路径,您可以更改的WebPack用于查找与一个模块的目录
resolve.modules
也可以使用resolve.alias
。
In your webpack config you also defined both module.rules
and module.loaders
. 在您的webpack配置中,您还定义了
module.rules
和module.loaders
。 When webpack sees module.rules
it ignores module.loaders
completely, so your babel-loader
wouldn't be used. 当webpack看到
module.rules
它module.loaders
完全忽略module.loaders
,因此不会使用你的babel-loader
。 You should only use module.rules
. 你应该只使用
module.rules
。
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
For some reason;因为某些原因; nothing worked for me so I added the
css
file to my list in entry
:对我没有任何作用,所以我将
css
文件添加到我的entry
列表中:
// webpack.config.js
module.exports = {
// ...
entry: ["./src/style.css", "./src/index.js"]
// ...
}
@Aakash try adding sideEffects: true to css-loader rule like this: @Aakash 尝试将 sideEffects: true 添加到 css-loader 规则,如下所示:
test: /\.css$/
sideEffects: true,
use: [...]
Looks like webpack treats project css files like a dead code.看起来 webpack 将项目 css 文件视为无效代码。 Found this workaround at cra config.
在 cra config 找到了这个解决方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.