Webpack Sass-无法解析图像 [英] Webpack Sass - cannot resolve images

问题描述

我正在尝试通过webpack编译我的Sass.编译普通的sass很好，但是出现错误.

I am trying to compile my Sass via webpack. Compiling normal sass is fine but I get an error.

 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编译器的级别设置为不太严格，以使其仅忽略某些错误

Is there a way to resolve this? Alternatively is there a way to set the level of the sass compiler to be less strict to just ignore certain errors

下面是我当前的配置.

var webpack = require('webpack');
var path = require('path');
let 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')

    ]

};

推荐答案

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

I know this is late, but for anyone looking for a workaround this error; In my case the image was loading perfectly in the template, however, Webpack was returning an error: Module not found: Error: Can't resolve './path/to/assets.png'

修复/解决方法:

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

Add ?url=false to your css-loader, that will disable url handling by the css-loader :

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

这篇关于Webpack Sass-无法解析图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！