需要工作JSX文件，但URL（）決心不SASS文件wroking - 的WebPack

我面對這個奇怪的問題與的WebPack。花費數小時後找不到解決方案。需要工作JSX文件，但URL（）決心不SASS文件wroking - 的WebPack

時，我一試，通過這個

let img = require('../../../img/imgN.png');

它可以正常使用，但設置圖像源我的JSX文件，當我試圖通過

$bg-img: url('../img/bg-img.png');

圖片設置使用SCSS背景圖片沒有通過webpack加載。

這是我的WebPack文件

module.exports = { 
    devtool: 'source-map', 
    entry: { 
    main: [ 
     'webpack-dev-server/client?http://localhost:8080', 
     'webpack/hot/only-dev-server', 
     './src/index.js' 
    ] 
    }, 
    output: { 
    path: path.join(__dirname, 'public'), 
    publicPath: '/public/', 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin() 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: path.join(__dirname, 'src'), 
     loader: 'react-hot!babel' 
     }, 
     { 
     test: /\.scss$/, 
     include: path.join(__dirname, 'sass'), 
     loaders: ["style", "css?sourceMap", "sass?sourceMap"] 
     }, 
     { 
      test: /\.(png|jpg)$/, 
      include: path.join(__dirname, 'img'), 
      loader: 'url-loader?limit=30000' 
    } // inline base64 URLs for <=30k images, direct URLs for the rest 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
}

來源

2016-03-07 WitVault

問題是因爲使用sourceMap的發生與style-loader。

對於同樣的問題github有一些問題。

解決方案：

1。 雖然源地圖啓用

樣式加載程序使用Blob，因此它需要絕對的URL來工作。

改變publicPath: '/public/',到

publicPath: 'http://localhost:8080/public/',

它的工作。

沒有源地圖 只是刪除從式裝載機源映射。

現在style-loader會使用內聯樣式標籤，所以沒有問題。

{ 
     test: /\.scss$/, 
     include: path.join(__dirname, 'sass'), 
     loaders: ["style", "css", "sass"] 
},

來源

2016-03-11 19:17:53 WitVault

你可以嘗試看看是否$ BG-IMG：網址（ '〜/ IMG/BG-img.png'）;會工作？當我在我的bootstrap.scss文件嘗試的WebPack我不得不修改字體網址的使用〜（我覺得我讀它的地方，但亞只是給你一些嘗試）

來源

2016-03-07 18:15:37

仍然沒有工作，但現在我看這個'背景：網址（「/ IMG/BG-img.png」）中心中心;'有沒有與之相關的哈希碼（這是由文件 - 完成loader或webpack中的url-loader）。以前我有'background：url（「/ img/sf9ds7f987dsf9dsf987.png」）center center;'。 – WitVault

需要工作JSX文件，但URL（）決心不SASS文件wroking - 的WebPack

回答

相關問題