Question

创建webpack config

时出现问题

这是我的配置：

  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;
 }

header.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

我不知道原因，请帮助我，谢谢！

Answer 1

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

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

使用Webpack处理SCSS中的图像

1 个答案: