Webpack Sass - 无法解析图像答案

【问题标题】：Webpack Sass - cannot resolve imagesWebpack Sass - 无法解析图像
【发布时间】：2017-07-23 09:02:19
【问题描述】：

我正在尝试通过 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"),
  ],
};

【问题讨论】：

标签： javascript webpack sass-loader

【解决方案1】：

你没有为你的 webpack 文件中的图片指定任何加载器。

将url-loader 和file-loader 安装到您的package.json

通过

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]'
    }, // inline base64 URLs for <=30k images, direct URLs for the rest

【讨论】：

感谢您的回复。为什么我必须加载它们？我不打算压缩它们或对它们做任何其他事情。看起来 webpack 真的只是在检查它们是否存在？这在某些情况下可能有用，但不是全部。还是我弄错了。
你需要合适的文件类型的加载器，这样 webpack 可以在你的代码需要时将它们作为静态资产。在您的情况下，可能使用图像作为背景网址或 scss 样式中的图像/
我已经更新了，路径是正确的。是不是因为相对路径？
好的，但是“是因为相对路径吗？”你指的是什么？

【解决方案2】：

我对@987654323@ 和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
              }
            }
        ]
      })
    }
  ],
},

【讨论】：

谢谢！注意：“重要！resolve-url-loader 之前的加载器需要源映射（无论 devtool 是什么）。” source: npm。我花了一些时间弄清楚

【解决方案3】：

我知道这已经晚了，但是对于正在寻找解决此错误的方法的任何人；在我的情况下，图像在模板中完美加载，但是，Webpack 返回错误：Module not found: Error: Can't resolve './path/to/assets.png'

修复/解决方法：

将 ?url=false 添加到您的 css-loader，这将禁用 css-loader 的 url 处理：

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

【讨论】：

这解决了我的问题。我只用 webpack 构建，而不是服务。我让文件系统在我的大多数无服务器项目中提供静态资产服务。谢谢！
这不是修复，因为资产没有构建。因此，您最终可能会得到一个已编译的样式表，其中包含指向不存在位置的路径。
或者将url选项设置为false { loader: 'css-loader', options: { url: false } }

【解决方案4】：

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

【讨论】：