Luc*_*ile 21 javascript css node.js webpack sass-loader
该sass loader医生说:"If you're just generating CSS without passing it to the css-loader, it must be relative to your web root".所以我按照它说的做了,我有我index.html的project root,然后我正在尝试image从我的scss文件中加载一个.现在我有2个错误:1)来自Chrome's console:Cannot find module "./img/header.jpg".2)来自我terminal:
ERROR in ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss
Module not found: Error: Cannot resolve 'file' or 'directory' ./img/header.jpg in C:\Web-Development\React\Portfolio\public\css
@ ./~/css-loader!./~/sass-loader!./~/resolve-url-loader!./public/css/header.scss 6:64-91
webpack.config.js
module.exports = {
entry: './main.jsx',
output: {
filename: './public/js/build/bundle.js'
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass", "resolve-url"]
},
{
test: /\.jpg$/,
loader: "file?name=[path][name].[ext]"
}
]
}
};
如果我看到我的代码,我可以清楚地看到我的css生活在里面<head>所以我已经指出我的图像的路径到我的根,正如文档所说,但仍然无法解决它.
更新:
我已经安装file-loader并按照说明操作,现在我在控制台中收到此错误:GET http://localhost:3000/public/img/header.jpg 404 (Not Found) - jquery.js:9119
据我所知,你实际上是在使用css loader("style", "css", "sass", "resolve-url")("css"部分是"css-loader")
在您的sass文件中,您应该使用您正在编辑的sass文件中的相对路径链接到图像.
styles
- somefile.scss
- another.scss
images
- someImage.jpg
在somefile.scss中,你应该像这样链接到你的图像:
background-image: url("../images/someImage.jpg);
请注意,如果您希望webpack将这些图像移动到您的分发文件夹(如果您使用的是这样的系统),那么您需要file-loader复制这些文件.
| 归档时间： |
|
| 查看次数： |
24632 次 |
| 最近记录： |