Webpack Sass - 无法解析图片

Question

Webpack Sass - 无法解析图片

30

我正在尝试通过webpack编译我的Sass。编译普通的Sass没有问题，但是我遇到了一个错误。

 Module not found: Error: Can't resolve '../img/twitter.svg' in '/Users/Steve/mywebsite/scss'
     @ ./~/css-loader!./~/sass-loader/lib/loader.js!./scss/main.scss 6:94501-94530

有没有解决这个问题的办法？或者有没有一种方法可以将Sass编译器的级别设置为更宽松，以忽略某些错误。

以下是我的当前配置。

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  resolve: {
    alias: {
      masonry: "masonry-layout",
      isotope: "isotope-layout",
    },
  },

  entry: "./main.js",
  output: {
    path: path.resolve(__dirname, "./dist/dist2"),
    filename: "bundle.js",
  },

  module: {
    rules: [
      {
        test: /\.(png|jpg|svg)$/,
        include: path.join(__dirname, "/dist/img"),
        loader: "url-loader?limit=30000&name=images/[name].[ext]",
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader?presets[]=es2015",
      },

      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          use: ["css-loader", "sass-loader"],
        }),
      },

      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          loaders: {},
          // other vue-loader options go here
        },
      },
    ],
  },

  plugins: [
    // new webpack.optimize.UglifyJsPlugin(),
    new ExtractTextPlugin("ross.css"),
  ],
};

- LeBlaireau

6个回答

7

我按照其他答案中的建议使用 url-loader 和 file-loader，但是没有成功。后来我通过使用 resolve-url-loader 解决了这个问题。

module: {
  rules: [
    { // sass / scss loader for webpack
      test: /\.(sass|scss|svg|png|jpe?g)$/, //Make sure to allow all necessary file types here
      use: ExtractTextPlugin.extract({
        use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: true
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: "resolve-url-loader", //resolve-url-loader needs to come *BEFORE* sass-loader
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            }
        ]
      })
    }
  ],
},

- dave

谢谢！注意：在使用resolve-url-loader之前的加载器需要source-maps（无论是否使用devtool）。来源：npm。我花了一些时间才弄明白。 - Andreas

3

这是css-loader 4.x中的重大变更（根据css-loader issue 1136）。

- Marcel Studer

0

我使用这个“使用 /* webpackIgnore: true */ 注释禁用 URL 解析”的方法。

https://webpack.js.org/loaders/css-loader/#disable-url-resolving-using-the--webpackignore-true--comment

- Eric

0

2023 - webpack (5.81.0)

我遇到了同样的错误，使用webpack（5.81.0）和css。尝试了所有上面的答案都没有成功，我进行了一些研究并更好地理解了这个问题。

通常在css文件中使用图像时（例如background-image:url(path/to/image)），就会出现此错误。

在我的情况下，我正在使用tailwind的bg-[url(path/to/image.jpg)]类，但是相对于构建期间将要加载的位置，url是错误的。

因此，最好的思考方式是：在构建期间图像将在哪里使用？相应地更改图像url。

- Steven Armoo

0

你的 webpack 文件中没有指定任何图像装载器。

在你的 package.json 中安装 url-loader 和 file-loader

通过

npm install --save url-loader file-loader

在你的 webpack 配置文件中添加以下内容 -

{
        test    : /\.(png|jpg|svg)$/,
        include : path.join(__dirname, 'img'),
        loader  : 'url-loader?limit=30000&name=images/[name].[ext]'
    }, // 对于大小不超过30k的图片使用 inline base64 URLs，对于超出此大小的图片使用直接 URL

- WitVault

2

谢谢回复。为什么我要加载它们？我不打算压缩它们或者做其他任何操作。看起来webpack只是在检查它们是否存在？这在某些情况下可能很有用，但并非所有情况都是如此。或者我理解错了吗？ - LeBlaireau

你需要为适当的文件类型安装加载器，这样webpack才能在代码中需要时将它们作为静态资源提供。在你的情况下，可能会使用图像作为背景URL或在scss样式中使用图像。 - WitVault

我已经更新了它，路径也是正确的。是因为相对路径的原因吗？ - LeBlaireau

好的，但是“是因为相对路径吗？”你指的是什么？ - WitVault

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Olamigoke Philip · Accepted Answer

我知道现在已经有点晚了，但是如果有人正在寻找解决这个错误的方法，可以参考以下方法：在我的情况下，模板中的图像加载得非常完美，然而Webpack返回了一个错误：Module not found: Error: Can't resolve './path/to/assets.png' 修复/解决办法：在你的css-loader中添加?url=false，这将禁用css-loader的url处理功能：

...
{
  loader: "css-loader?url=false"
},
...