web-dev-qa-db-ja.com

WebpackSass-画像を解決できません

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コンパイラのレベルをそれほど厳密に設定しない方法はありますか？

以下は私の現在の設定です。

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')

    ]

};
webpacksass-loader
6
LeBlaireau

私はこれが遅いことを知っていますが、このエラーの回避策を探している人にとっては。私の場合、画像はテンプレートに完全に読み込まれていましたが、Webpackはエラーを返していました：Module not found: Error: Can't resolve './path/to/assets.png'

修正/回避策：

追加 ?url=false css-loaderに、css-loaderによるURL処理を無効にします：

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

他の回答で示唆されているように、私は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
              }
            }
        ]
      })
    }
  ],
},
2
dave

Webpackファイル内の画像のローダーを指定していません。

  1. インストールurl-loaderおよびfile-loader to your package.json

via

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
1
WitVault