webpack和更少如何在css中包含圖像url

只是與我的webpack混淆，並沒有設置最佳的方式來包括在我的CSS圖像的網址，並讓他們在開發和建設模式下工作。webpack和更少如何在css中包含圖像url

以下在dev中使用webpack-devserver工作，但不是在構建之後。

.login-container{ 
    height:100%; 
    width:100%; 
    background: url('../../images/home3.jpg') no-repeat center center fixed;

而在我的配置中。

plugins.push(
      new HtmlWebpackPlugin({ 
       template: './src/index.html', 
       inject: 'body' 
      }), 
      // Write out CSS bundle to its own file: 
      new ExtractTextPlugin({ 
       filename: 'css/styles.css', 
       allChunks: true}) 
     );

而且

entry: { 
     app: './src/app/app.js' 
    }, 
    devServer: { 
     outputPath: path.join(__dirname, 'src'), 
     contentBase: "./src" 
    }, 
    output: { 
     path: path.resolve(__dirname, 'dist'), 
     publicPath: isProd ? '' : 'http://localhost:8080/', 
     filename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js', 
     chunkFilename: isProd ? 'js/[name].[hash].js' : 'js/[name].bundle.js' 
    },

在開發它工作得很好，但生成後，它試圖從我的css文件夾中加載圖像

即mysites/CSS/12424324234234234.jpg

而不是

ie mysites/12424324234234234.jpg其中的圖像真的是。

來源

2016-09-06 StevieB

這些解決方案發布在以下Github問題可能會幫助你。

Github Issues 1

Github Issues 2

用於該方法的替代方法可以如本

的ExtractTextPlugin需要處理等的CSS/[名稱]的CSS文件名來進行。作爲替代方法，您可以使用[name] .css。

設置{ publicPath: '/' }以便每個參考變爲根相對。

你也可以使用url-loader

您還可以檢查此犯發表sokra

code loaders: [ 
      { test: /\.css$/, loader: ExtractTextPlugin.extract(
       "style-loader", 
      "css-loader?sourceMap" 
      "css-loader?sourceMap", 
      { 
       publicPath: "../" 
      } 
      )}, 
      { test: /\.png$/, loader: "file-loader" } 
     ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("[name].css?[hash]-[chunkhash]-[name]", { 
    new ExtractTextPlugin("css/[name].css?[hash]-[chunkhash]-[name]", { 
      disable: false, 
      allChunks: true 
     }),

來源

2016-10-20 12:27:04

webpack和更少如何在css中包含圖像url

回答

相關問題