时间戳

首页 > 解决方案 > 使用 Webpack 处理 SCSS 中的图像

webpack - 使用 Webpack 处理 SCSS 中的图像

问题描述

创建 webpack 配置时遇到问题

这是我的配置：

  module: {
rules: [
  {
    test: /\.js$/,
    use: {
      loader: "babel-loader",
      options: {
        presets: ['babel-preset-env']
      }
    }
  },
  {
    test: /\.scss$/,
    use: [
      MiniCssExtractPlugin.loader,
      "css-loader",
      "sass-loader"
    ]
  },
  {
    test: /\.(jp(e)?g|png|gif|svg)$/,
    use: {
      loader: 'url-loader',
      options: {
        limit: 8192,
        name: 'css/images/[name].[ext]'
      }
    }
  }
]

}

这是文件结构：

src/index.js
src/scss/style.scss
src/scss/component/header.scss

内容 index.js

import "./scss/style.scss";

这是 index.scss

 @import "./components/header";
 body{
  background: url("./images/bg.jpg");
  color: red;
 }

头文件.scss

header{
  background: url('./images/headerbg.png');
}

运行后，我遇到了这个问题：

ERROR in ./src/scss/style.scss (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/scss/style.scss)
    Module not found: Error: Can't resolve './images/headerbg.png' in '/Volumes/MacData/Workspace/Projects/learncode/webpack/webpack02/src/scss'
     @ ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./src/scss/style.scss 7:65-97

不知道是什么原因，请帮帮我，谢谢！

标签： webpack

解决方案

我找到了解决这个问题的方法：resolve-url-loader

这是此问题的文档：https ://webpack.js.org/loaders/sass-loader/#problems-with-url-

推荐阅读