26

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

4 回答 4

37

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

修复/解决方法：

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

...
{
  loader: "css-loader?url=false"
},
...
于 2019-11-10T15:34:50.077 回答
5

正如另一个答案中所建议的那样，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
              }
            }
        ]
      })
    }
  ],
},
于 2018-03-23T18:40:23.190 回答
3

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

于 2020-08-03T05:28:47.853 回答
0

您尚未在 webpack 文件中为图像指定任何加载器。

  1. 安装url-loader到file-loader你的package.json

通过

npm install --save url-loader file-loader

  1. 在您的 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
于 2017-03-03T10:14:56.807 回答