3

画像を読み込もうとしています：

background: transparent url("../img/select-icon.png") no-repeat center right 8px;

私のstyle.scssで、それが機能していません

これが私のwebpack.configです：

function _path(p) {
  return path.join(__dirname, p);
}

module.exports = {

    context: __dirname,
    entry: [
        './assets/js/index'
    ], 

    output: {
        path: path.resolve('./assets/bundles/'), 
        filename: '[name].js'
    },

    devtool: 'inline-eval-cheap-source-map',

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}), 
        new webpack.ProvidePlugin({ 
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery' 
        }),
        new HappyPack({
            id: 'jsx',
            threads: 4,
            loaders: ["babel-loader"]
        })

    ],

    module: {
        loaders: [
            {
                test: /\.css$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: "style-loader!css-loader"
            },

            {
                test: /\.scss$/,
                include: path.resolve(__dirname, './assets/css/'),
                loader: "style-loader!css-loader!sass-loader"
            },

            {
                test: /\.jsx?$/, 
                include: path.resolve(__dirname, './assets/js/'),
                exclude: /node_modules/, 
                loaders: ["happypack/loader?id=jsx"]
            },
            {
                test: /\.png$/,
                loader: 'file-loader'
            }
        ]
    },

    resolve: {
        modulesDirectories: ['node_modules'],
        extensions: ['', '.js', '.jsx'],
        alias: {
          'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask'),
        }, 
    }   
}

ファイルローダーを使用していますが、ブラウザでレンダリングされた URL が画像の URL と一致しません。

ソースマップを使用していないと思います: https://github.com/webpack/style-loader/issues/55

誰でも助けることができますか？

4

2 に答える 2

3

url('...') をファイル出力パスに解決するresolve-url-loaderには、css-loader.

webpack.config.js次の変更を行う必要があります。

//...
module: {
    loaders: [
        {
            test: /\.css$/,
            include: path.resolve(__dirname, './assets/css/'),
            loader: "style-loader!css-loader!resolve-url-loader"
        },

        {
            test: /\.scss$/,
            include: path.resolve(__dirname, './assets/css/'),
            loader: "style-loader!css-loader!resolve-url-loader!sass-loader"
        },
        //...
    ]
}
//...

オプションの設定として、 がfile-loader使用するファイル名テンプレートを指定できます。したがって、たとえばの代わりに、 を持つ96ab4c4434475d0d‌​23b82bcfc87be595.pngことができます/img/select-icon.png。

webpack.config.jsのデフォルト オプションが使用されていますfile-loader。これは、出力ファイル名がテンプレートを使用していることを意味します[id].[ext]。チャンク[id]ID と[ext]ファイルの拡張子です。

name出力ファイル名テンプレートを指定するには、パラメーターをローダーのクエリに渡す必要があります。

この時点まで、require('../img/select-icon.png')を返す必要があり'/img/select-icon.png'ます。はこのresolve-url-loader値を使用します。

//...
module: {
    loaders: [
        //...
        {
            test: /\.png$/,
            loader: 'file-loader',
            query: {
                name: 'img/[name].[ext]'
            }
        },
        //...
    ]
}
//...
于 2016-08-17T06:41:10.913 に答える
0

私は Angular Class スターター パックを使用しているため、「ヘルパー」クラスが利用可能かどうかはわかりません。

webpack config/common 内にヘルパー定数を追加します。

const helpers = require('./helpers');

あなたの解決内に：追加

root: helpers.root('src'),

ローダー内に次を追加します。

  {
    test: /\.html$/,
    loader: 'raw-loader',
    exclude: [helpers.root('src/index.html')]
  },

scssローダーをこれに変更します

  {
    test: /\.scss$/,
    exclude: /node_modules/,
    loaders: ['raw-loader', 'sass-loader']
  },

「include.path」をまだ使用できるかどうかはわかりませんが、「url ('./assets/img/whatever.png')」のように URL 内に「assets」を追加するだけです。

お役に立てば幸いです。

于 2016-08-16T13:31:40.100 に答える